<!DOCTYPE html>

<!--
                           _ooOoo_
                          o8888888o
                          88" . "88
                          (| -_- |)
                          O\  =  /O
                       ____/`---'\____
                     .'  \\|     |//  `.
                    /  \\|||  :  |||//  \
                   /  _||||| -:- |||||-  \
                   |   | \\\  -  /// |   |
                   | \_|  ''\---/''  |   |
                   \  .-\__  `-`  ___/-. /
                 ___`. .'  /--.--\  `. . __
              ."" '<  `.___\_<|>_/___.'  >'"".
             | | :  `- \`.;`\ _ /`;.`/ - ` : | |
             \  \ `-.   \_ __\ /__ _/   .-` /  /
        ======`-.____`-.___\_____/___.-`____.-'======
                           `=---='
        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
                 佛祖保佑       永无BUG 
-->



  


<html class="theme-next mist use-motion" lang="zh-Hans">
<head>
  <meta charset="UTF-8"/>
<link href="//mydearest.cn" rel="dns-prefetch">
<link href="//www.mydearest.cn" rel="dns-prefetch">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="theme-color" content="#222">





	<meta name="description" content="陈宇的博客" />






<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />

















  
  
  
  

  
    
    
  

  
    
      
    

    
  

  

  
    
      
    

    
  

  
    
      
    

    
  

  
    
    
    <link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic|Roboto Slab:300,300italic,400,400italic,700,700italic|Lobster Two:300,300italic,400,400italic,700,700italic|PT Mono:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
  





  <meta name="keywords" content="面试," />





  <link rel="alternate" href="/rss2.xml" title="cosyer's Blog" type="application/atom+xml" />




  
  <link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico" />






<meta name="description" content="字符串扩展的方法 includes()：返回布尔值，表示是否找到了参数字符串。数组也可以 a[1]=1 且能判断undefined 123456var a=[1,2,3]a[4]=5 // [1, 2, 3, undefined × 1, 5] empty// a[3]=undefined [1, 2, 3, undefined, 5] a.indexOf(undefined) // -1a.in">
<meta name="keywords" content="面试">
<meta property="og:type" content="article">
<meta property="og:title" content="面试题整理归纳">
<meta property="og:url" content="http://mydearest.cn/interview.html">
<meta property="og:site_name" content="cosyer&#39;s Blog">
<meta property="og:description" content="字符串扩展的方法 includes()：返回布尔值，表示是否找到了参数字符串。数组也可以 a[1]=1 且能判断undefined 123456var a=[1,2,3]a[4]=5 // [1, 2, 3, undefined × 1, 5] empty// a[3]=undefined [1, 2, 3, undefined, 5] a.indexOf(undefined) // -1a.in">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="http://cdn.mydearest.cn/blog/images/boardcast.png">
<meta property="og:image" content="http://cdn.mydearest.cn/blog/images/tcp.png">
<meta property="og:image" content="http://cdn.mydearest.cn/blog/images/w3c-box.jpg">
<meta property="og:image" content="http://cdn.mydearest.cn/blog/images/ie-box.jpg">
<meta property="og:updated_time" content="2020-05-24T09:37:43.990Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="面试题整理归纳">
<meta name="twitter:description" content="字符串扩展的方法 includes()：返回布尔值，表示是否找到了参数字符串。数组也可以 a[1]=1 且能判断undefined 123456var a=[1,2,3]a[4]=5 // [1, 2, 3, undefined × 1, 5] empty// a[3]=undefined [1, 2, 3, undefined, 5] a.indexOf(undefined) // -1a.in">
<meta name="twitter:image" content="http://cdn.mydearest.cn/blog/images/boardcast.png">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Mist',
    sidebar: {"position":"left","display":"always","offset":12,"offset_float":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: true,
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="http://mydearest.cn/interview.html"/>





  <title>面试题整理归纳 | cosyer's Blog</title>
  





  <script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?653a4be35cb6c7b26817038a17c3f0d6";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>











  
<link href="https://mydearest.cn/css/all-9097fb9016.css" rel="stylesheet" type="text/css">
<style>
// scrollbar滚动条样式优化

::-webkit-scrollbar-corner {
  background-color: transparent;
}

::-webkit-scrollbar-button {
  width: 0;
  height: 0;
  display: none;
}

::-webkit-scrollbar-thumb {
  width: 7px;
  background-color: #b4babf;
  border-radius: 7px;
}

::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-track {
  width: 15px;
}

::-webkit-scrollbar:hover {
  background-color: transparent;
}

* {
    cursor: url("http://cdn.mydearest.cn/blog/images/miku1.png"),auto!important
}
:active {
    cursor: url("http://cdn.mydearest.cn/blog/images/miku2.png"),auto!important
}
a:hover {
    cursor: url("http://cdn.mydearest.cn/blog/images/miku2.png"),auto!important
}
</style>
</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  <div id="loader">
    <div></div>
  </div>

  
  
    
  

  <div class="container sidebar-position-left page-post-detail ">
    <div class="headband"></div>
    <a href="https://github.com/cosyer" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; left: 0; transform: scale(-1, 1);" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style></a>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/"  class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">cosyer's Blog</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <h1 class="site-subtitle" itemprop="description">Blog</h1>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" class="faa-parent animated-hover" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home faa-wrench"></i> <br />
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-links">
          <a href="/links/" class="faa-parent animated-hover" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-link faa-shake"></i> <br />
            
            友链
          </a>
        </li>
      
        
        <li class="menu-item menu-item-guestbook">
          <a href="/guestbook/" class="faa-parent animated-hover" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-comment-o faa-tada"></i> <br />
            
            留言板
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives/" class="faa-parent animated-hover" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive faa-float"></i> <br />
            
            归档
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about/" class="faa-parent animated-hover" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-user faa-horizontal"></i> <br />
            
            关于
          </a>
        </li>
      

      
        <li class="menu-item menu-item-search">
          
            <a href="javascript:;" class="popup-trigger faa-parent animated-hover">
          
            
              <i class="menu-item-icon fa fa-search faa-burst fa-fw"></i> <br />
            
            搜索
          </a>
        </li>
      
    </ul>
  

  
    <div class="site-search">
      
  <div class="popup search-popup local-search-popup">
  <div class="local-search-header clearfix">
    <span class="search-icon">
      <i class="fa fa-search"></i>
    </span>
    <span class="popup-btn-close">
      <i class="fa fa-times-circle"></i>
    </span>
    <div class="local-search-input-wrapper">
      <input autocomplete="off"
             placeholder="搜索..." spellcheck="false"
             type="text" id="local-search-input">
    </div>
  </div>
  <div id="local-search-result"></div>
</div>



    </div>
  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-date" data-datetime="2020-05-24T17:37:43+08:00">
    <div class="post-time-text">5月</div>
    <div class="post-time-count">24</div>
    <div class="text-desc">
			<div class="date-text">更新于</div>
      <div class="post-tiem">5月24</div>
      <div class="post-year">2020</div>
		</div>
  </div>
  
  
  

  <div class="post-badge">
    
            <span class="post-category" >
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/知识/" itemprop="url" rel="index">
                    <span itemprop="name">知识</span>
                  </a>
                </span>

                
                
              
            </span>
    
  </div>

  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://mydearest.cn/interview.html">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="陈宇（cosyer）">
      <meta itemprop="description" content="不去做的话永远也做不到。">
      <meta itemprop="image" content="/images/avatar.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="cosyer's Blog">
    </span>

    
      <header class="post-header">

        
        
          <h2 class="post-title" itemprop="name headline">面试题整理归纳</h2>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="发表于" itemprop="dateCreated datePublished" datetime="2018-06-23T10:58:48+08:00">
                2018-06-23
              </time>
            

            

            
          </span>

          


          
            
          

          
          
             <span id="/interview.html" class="leancloud_visitors" data-flag-title="面试题整理归纳">
               <span class="post-meta-divider">|</span>
               <span class="post-meta-item-icon">
                 <i class="fa fa-eye"></i>
               </span>
               
                 <span class="post-meta-item-text">热度 </span>
               
                 <span class="leancloud-visitors-count"></span> ℃
             </span>
          

          


          
            <div class="post-wordcount">
              
                
                  <span class="post-meta-divider">|</span>
                
                <span class="post-meta-item-icon">
                  <i class="fa fa-pencil-square-o"></i>
                </span>
                
                  <span class="post-meta-item-text">字数统计：</span>
                
                <span title="字数统计：">
                  24,437 (字)
                </span>
              

              
                <span class="post-meta-divider">|</span>
              

              
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>
                
                  <span class="post-meta-item-text">阅读时长：</span>
                
                <span title="阅读时长：">
                  96 (分钟)
                </span>
              
            </div>
          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <h2 id="字符串扩展的方法"><a href="#字符串扩展的方法" class="headerlink" title="字符串扩展的方法"></a>字符串扩展的方法</h2><ul>
<li><p>includes()：返回布尔值，表示是否找到了参数字符串。数组也可以 a[1]=1 且能判断undefined</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a=[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>]</span><br><span class="line">a[<span class="number">4</span>]=<span class="number">5</span> <span class="comment">// [1, 2, 3, undefined × 1, 5] empty</span></span><br><span class="line"><span class="comment">// a[3]=undefined [1, 2, 3, undefined, 5] </span></span><br><span class="line"></span><br><span class="line">a.indexOf(<span class="literal">undefined</span>) <span class="comment">// -1</span></span><br><span class="line">a.includes(<span class="literal">undefined</span>) <span class="comment">// true</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// polyfill</span></span><br><span class="line"><span class="keyword">if</span> (<span class="built_in">String</span>.prototype.startsWith) &#123;</span><br><span class="line">  <span class="built_in">String</span>.prototype.startsWith = <span class="function"><span class="keyword">function</span> (<span class="params">search, index</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span>.substr((!index || index &lt; <span class="number">0</span>) ? <span class="number">0</span> : index, search.length) === search;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。
str | index</p>
</li>
<li>repeat()：返回一个新字符串，表示将原字符串重复n次。参数如果是小数，会被取整(不四舍五入)。参数是负数或者Infinity，会报错。0/NaN返回空字符串,参数是字符串，则会先转换成数字，不传则为空字符串。</li>
<li>padStart()：头部补全。</li>
<li>padEnd()：尾部补全<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&apos;x&apos;.padStart(5, &apos;ab&apos;) // &apos;ababx&apos;</span><br><span class="line">&apos;x&apos;.padStart(4, &apos;ab&apos;) // &apos;abax&apos;</span><br><span class="line"></span><br><span class="line">&apos;x&apos;.padEnd(5, &apos;ab&apos;) // &apos;xabab&apos;</span><br><span class="line">&apos;x&apos;.padEnd(4, &apos;ab&apos;) // &apos;xaba&apos;</span><br></pre></td></tr></table></figure>
</li>
</ul>
<p>如果原字符串的长度，等于或大于指定的最小长度，则返回原字符串。默认使用空格</p>
<hr>
<a id="more"></a>
<ul>
<li>模板字符串（template string）是增强版的字符串，用反引号`标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。`${表达式、变量}`</li>
<li>commonjs 服务器端 amd 浏览器端</li>
<li>const 必须赋值定义 let 在同一作用于无法重复命名 无法变量提升</li>
<li>split(字符串或者正则,设置长度) 字符串=&gt;数组</li>
<li>substr(开始的索引//splice可以为负数-1则为字符串最后一个字符,length字符数)方法不同的是,substring(开始索引，结束索引+1)负的参数有区别
只有单参数时到字符串结尾
String exd=filePath.substring(filePath.lastIndexOf(“.”)+1,filePath.length)</li>
</ul>
<h2 id="声明函数作用提升-声明变量和声明函数的提升有什么区别"><a href="#声明函数作用提升-声明变量和声明函数的提升有什么区别" class="headerlink" title="声明函数作用提升?声明变量和声明函数的提升有什么区别?"></a>声明函数作用提升?声明变量和声明函数的提升有什么区别?</h2><p>(1) 变量声明提升：变量申明在进入执行上下文就完成了。
只要变量在代码中进行了声明，无论它在哪个位置上进行声明， js引擎都会将它的声明放在范围作用域的顶部；</p>
<p>(2) 函数声明提升：执行代码之前会先读取函数声明，意味着可以把函数申明放在调用它的语句后面。
只要函数在代码中进行了声明，无论它在哪个位置上进行声明， js引擎都会将它的声明放在范围作用域的顶部；</p>
<p>(3) 变量or函数声明：函数声明会覆盖变量声明，但不会覆盖变量赋值。
同一个名称标识a，即有变量声明var a，又有函数声明function a() {}，不管二者声明的顺序，函数声明会覆盖变量声明，也就是说，此时a的值是声明的函数function a() {}。注意：如果在变量声明的同时初始化a，或是之后对a进行赋值，此时a的值变量的值。
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">eg: <span class="keyword">var</span> a; <span class="keyword">var</span> c = <span class="number">1</span>; a = <span class="number">1</span>; <span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params"></span>) </span>&#123; <span class="keyword">return</span> <span class="literal">true</span>; &#125; <span class="built_in">console</span>.log(a);</span><br></pre></td></tr></table></figure></p>
<h2 id="如何判断数据类型？"><a href="#如何判断数据类型？" class="headerlink" title="如何判断数据类型？"></a>如何判断数据类型？</h2><p>typeof返回的类型都是字符串形式，可以判断function的类型；在判断除Object类型的对象时比较方便。
判断已知对象类型的方法： instanceof，后面一定要是对象类型，并且大小写不能错，该方法适合一些条件选择或分支。
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">typeof</span> <span class="literal">null</span> <span class="comment">// object null instanceof Object // false</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> str = <span class="string">'abc'</span>;     </span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> str++);         <span class="comment">//number NaN</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> (<span class="string">'abc'</span> + <span class="number">1</span>));   <span class="comment">//string 'abc1'</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> <span class="keyword">new</span> <span class="built_in">Date</span>());    <span class="comment">//object</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> <span class="built_in">Date</span>());        <span class="comment">//string</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> <span class="built_in">Date</span>);          <span class="comment">//function</span></span><br></pre></td></tr></table></figure></p>
<h2 id="异步编程？"><a href="#异步编程？" class="headerlink" title="异步编程？"></a>异步编程？</h2><ul>
<li>方法1：回调函数，优点是简单、容易理解和部署，缺点是不利于代码的阅读和维护，各个部分之间高度耦合（Coupling），流程会很混乱，而且每个任务只能指定一个回调函数。</li>
</ul>
<p>事件监听，可以绑定多个事件，每个事件可以指定多个回调函数，而且可以“去耦合”（Decoupling），有利于实现模块化。缺点是整个程序都要变成事件驱动型，运行流程会变得很不清晰。</p>
<ul>
<li><p>方法2：事件发布/订阅，性质与“事件监听”类似，但是明显优于后者。</p>
</li>
<li><p>方法3：Promises对象，是CommonJS工作组提出的一种规范，目的是为异步编程提供统一接口。简单说，它的思想是，每一个异步任务返回一个Promise对象，该对象有一个then方法，允许指定回调函数。</p>
<ul>
<li>generator</li>
<li>async/await</li>
</ul>
</li>
</ul>
<h2 id="事件流？事件捕获？事件冒泡？"><a href="#事件流？事件捕获？事件冒泡？" class="headerlink" title="事件流？事件捕获？事件冒泡？"></a>事件流？事件捕获？事件冒泡？</h2><p>事件流：从页面中接收事件的顺序。也就是说当一个事件产生时，这个事件的传播过程，就是事件流。</p>
<ol>
<li>捕获阶段：事件从window对象自上而下向目标节点传播的阶段；</li>
<li>目标阶段：真正的目标节点正在处理事件的阶段；</li>
<li>冒泡阶段：事件从目标节点自下而上向window对象传播的阶段；</li>
</ol>
<p>事件捕获是不太具体的元素应该更早接受到事件，而最具体的节点应该最后接收到事件。他们的用意是在事件到达目标之前就捕获它。
事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点（文档）。</p>
<p><img src="http://cdn.mydearest.cn/blog/images/boardcast.png" alt="boardcast"></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">nav</span> <span class="attr">id</span>=<span class="string">"root_b"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">ul</span> <span class="attr">id</span>=<span class="string">"first_b"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">id</span>=<span class="string">"second_b"</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">id</span>=<span class="string">"target_b"</span> <span class="attr">href</span>=<span class="string">"#"</span>&gt;</span>冒泡<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">nav</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">nav</span> <span class="attr">id</span>=<span class="string">"root_c"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">ul</span> <span class="attr">id</span>=<span class="string">"first_c"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">id</span>=<span class="string">"second_c"</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">id</span>=<span class="string">"target_c"</span> <span class="attr">href</span>=<span class="string">"#"</span>&gt;</span>捕获<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">nav</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment">* listen</span></span><br><span class="line"><span class="comment">* @param &#123;string[]&#125; ids </span></span><br><span class="line"><span class="comment">* @param &#123;boolean&#125; isCatch </span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">const</span> listen = <span class="function">(<span class="params">ids, isCatch</span>) =&gt;</span> ids.forEach(<span class="function"><span class="params">id</span> =&gt;</span> <span class="built_in">document</span>.getElementById(id).addEventListener(<span class="string">'click'</span>, () =&gt; alert(id), isCatch))</span><br><span class="line"></span><br><span class="line"><span class="comment">// BubbleEvent</span></span><br><span class="line">listen([<span class="string">'root_b'</span>, <span class="string">'first_b'</span>, <span class="string">'second_b'</span>, <span class="string">'target_b'</span>], <span class="literal">false</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// CatchEvent</span></span><br><span class="line">listen([<span class="string">'root_c'</span>, <span class="string">'first_c'</span>, <span class="string">'second_c'</span>, <span class="string">'target_c'</span>], <span class="literal">true</span>)</span><br></pre></td></tr></table></figure>
<h2 id="如何添加一个dom对象到body中-innerHTML、document-write和innerText区别"><a href="#如何添加一个dom对象到body中-innerHTML、document-write和innerText区别" class="headerlink" title="如何添加一个dom对象到body中?innerHTML、document.write和innerText区别?"></a>如何添加一个dom对象到body中?innerHTML、document.write和innerText区别?</h2><p>body.appendChild(dom元素)；<br>innerHTML:从对象的起始位置到终止位置的全部内容,包括Html标签。
innerText:从起始位置到终止位置的内容, 但它去除Html标签 
document.write只能重绘整个页面</p>
<h2 id="简述ajax流程"><a href="#简述ajax流程" class="headerlink" title="简述ajax流程"></a>简述ajax流程</h2><p>1)客户端产生触发js的事件<br>2)创建XMLHttpRequest对象<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> client=<span class="literal">null</span></span><br><span class="line"><span class="keyword">if</span>(<span class="built_in">window</span>.XMLHttpRequest)&#123;</span><br><span class="line">      client = <span class="keyword">new</span> XMLHttpRequest();</span><br><span class="line">&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">      client = <span class="keyword">new</span> ActiveXObject(<span class="string">"Microsoft.XMLHTTP"</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>3)对XMLHttpRequest进行配置 
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">client.open(<span class="string">"GET"</span>, url);</span><br><span class="line">client.onreadystatechange = <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (client.readyState !== <span class="number">4</span>) &#123; <span class="comment">// client状态</span></span><br><span class="line">      <span class="keyword">return</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">if</span> (client.status === <span class="number">200</span>) &#123; <span class="comment">// HTTP状态码</span></span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">'success'</span>, client.responseText);</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      <span class="built_in">console</span>.warn(<span class="string">'error'</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;; <span class="comment">// 指定回调函数</span></span><br><span class="line">client.responseType = <span class="string">"json"</span>;</span><br><span class="line">client.setRequestHeader(<span class="string">"Accept"</span>, <span class="string">"application/json;"</span>);</span><br><span class="line">client.setRequestHeader(<span class="string">"Content-Type"</span>, <span class="string">"application/json;charset=utf-8"</span>);</span><br></pre></td></tr></table></figure></p>
<p>4)通过AJAX引擎发送异步请求 
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">client.send()</span><br></pre></td></tr></table></figure></p>
<p><code>promise 封装</code>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment">  * @param &#123;string&#125; url</span></span><br><span class="line"><span class="comment">  * @param &#123;string&#125; method</span></span><br><span class="line"><span class="comment">  * @param &#123;object&#125; params</span></span><br><span class="line"><span class="comment">  * @returns</span></span><br><span class="line"><span class="comment">  */</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">request</span>(<span class="params">url, method = <span class="string">'GET'</span>, params = null</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> xhr = <span class="keyword">new</span> XMLHttpRequest()</span><br><span class="line">    xhr.open(method, url)</span><br><span class="line">    xhr.addEventListener(<span class="string">'readystatechange'</span>, () =&gt; &#123;</span><br><span class="line">      <span class="keyword">if</span> (xhr.readyState === <span class="number">4</span>) &#123;</span><br><span class="line">        <span class="keyword">if</span> (xhr.status === <span class="number">200</span>) &#123;</span><br><span class="line">          resolve(xhr.responseText)</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">          reject(&#123;</span><br><span class="line">            code: xhr.status,</span><br><span class="line">            response: xhr.response</span><br><span class="line">          &#125;)</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">    setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> reject(<span class="string">'timeout:1000'</span>), <span class="number">1000</span>)</span><br><span class="line">    xhr.send(<span class="built_in">JSON</span>.stringify(params))</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>5)服务器端接收请求并且处理请求，返回html或者xml内容<br>6)XML调用一个callback()处理响应回来的内容<br>7)使用JS和DOM实现局部刷新</p>
<h2 id="自执行函数？用于什么场景？好处？"><a href="#自执行函数？用于什么场景？好处？" class="headerlink" title="自执行函数？用于什么场景？好处？"></a>自执行函数？用于什么场景？好处？</h2><p>1、声明一个匿名函数<br>2、马上调用这个匿名函数。<br>作用：创建一个独立的作用域。  </p>
<p>好处：防止变量弥散到全局，以免各种js库冲突。隔离作用域避免污染，或者截断作用域链，避免闭包造成引用变量无法释放。利用立即执行特性，返回需要的业务函数或对象，避免每次通过条件判断来处理。</p>
<p>场景：一般用于框架、插件等场景，设计私有变量和方法，封闭私有作用域。</p>
<h2 id="立即执行函数表达式-IIFE"><a href="#立即执行函数表达式-IIFE" class="headerlink" title="立即执行函数表达式(IIFE)"></a>立即执行函数表达式(IIFE)</h2><h3 id="使用匿名函数表达式"><a href="#使用匿名函数表达式" class="headerlink" title="使用匿名函数表达式"></a>使用匿名函数表达式</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="number">2</span>;</span><br><span class="line">(<span class="function"><span class="keyword">function</span> <span class="title">IIFE</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="keyword">var</span> a = <span class="number">3</span>;</span><br><span class="line">	<span class="built_in">console</span>.log(a);<span class="comment">//3</span></span><br><span class="line">&#125;)();</span><br><span class="line"><span class="built_in">console</span>.log(a);<span class="comment">//2</span></span><br></pre></td></tr></table></figure>
<h3 id="当作函数调用并传递参数进去"><a href="#当作函数调用并传递参数进去" class="headerlink" title="当作函数调用并传递参数进去"></a>当作函数调用并传递参数进去</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="number">2</span>;</span><br><span class="line">(<span class="function"><span class="keyword">function</span> <span class="title">IIFE</span>(<span class="params">global</span>)</span>&#123;</span><br><span class="line">	<span class="keyword">var</span> a = <span class="number">3</span>;</span><br><span class="line">	<span class="built_in">console</span>.log(a);<span class="comment">//3</span></span><br><span class="line">	<span class="built_in">console</span>.log(global.a);<span class="comment">//2</span></span><br><span class="line">&#125;)(<span class="built_in">window</span>);</span><br><span class="line"><span class="built_in">console</span>.log(a);<span class="comment">//2</span></span><br></pre></td></tr></table></figure>
<h3 id="解决undefined标识符默认值被错误覆盖"><a href="#解决undefined标识符默认值被错误覆盖" class="headerlink" title="解决undefined标识符默认值被错误覆盖"></a>解决undefined标识符默认值被错误覆盖</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="literal">undefined</span> = <span class="literal">true</span>;</span><br><span class="line">(<span class="function"><span class="keyword">function</span> <span class="title">IIFE</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="keyword">var</span> a ;</span><br><span class="line">	<span class="keyword">if</span>(a === <span class="literal">undefined</span>)&#123;</span><br><span class="line">		<span class="built_in">console</span>.log(<span class="string">'Undefined is safe here!'</span>);</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)();</span><br></pre></td></tr></table></figure>
<h4 id="倒置代码运行顺序"><a href="#倒置代码运行顺序" class="headerlink" title="倒置代码运行顺序"></a>倒置代码运行顺序</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="number">2</span>;</span><br><span class="line">(<span class="function"><span class="keyword">function</span> <span class="title">IIFE</span>(<span class="params">def</span>)</span>&#123;</span><br><span class="line">	def(<span class="built_in">window</span>);</span><br><span class="line">&#125;)(<span class="function"><span class="keyword">function</span> <span class="title">def</span>(<span class="params">global</span>)</span>&#123;</span><br><span class="line">	<span class="keyword">var</span> a = <span class="number">3</span>;</span><br><span class="line">	<span class="built_in">console</span>.log(a);<span class="comment">//3</span></span><br><span class="line">	<span class="built_in">console</span>.log(global.a);<span class="comment">//2</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> i = <span class="number">1</span>;</span><br><span class="line"><span class="keyword">var</span> IFun = (<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="keyword">var</span> i = <span class="number">1</span>;</span><br><span class="line">	<span class="built_in">console</span>.log(i);</span><br><span class="line">	<span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		i++;</span><br><span class="line">		<span class="built_in">console</span>.log(i);</span><br><span class="line">&#125;</span><br><span class="line">&#125;)();</span><br><span class="line">IFun();</span><br><span class="line">IFun();</span><br><span class="line">最终输出的结果为<span class="number">1</span>，<span class="number">2</span>，<span class="number">3</span>，很多人会下意识的觉得结果会有<span class="number">4</span>个值，但是运用了<span class="keyword">return</span> 返回值以及自执行函数将函数返回给IFun变量，使得在第一次操作过程后，将返回函数直接赋给IFun。</span><br></pre></td></tr></table></figure>
<h2 id="回调函数？（传递地址，由非实现方调用）"><a href="#回调函数？（传递地址，由非实现方调用）" class="headerlink" title="回调函数？（传递地址，由非实现方调用）"></a>回调函数？（传递地址，由非实现方调用）</h2><p>回调函数就是一个通过函数指针调用的函数。如果你把函数的指针（地址）作为参数传递给另一个函数，当这个指针被用来调用其所指向的函数时，我们就说这是回调函数。回调函数不是由该函数的实现方直接调用，而是在特定的事件或条件发生时由另外的一方调用的，用于对该事件或条件进行响应。</p>
<h2 id="什么是闭包-堆栈溢出有什么区别？-内存泄漏-那些操作会造成内存泄漏？怎么样防止内存泄漏？impression"><a href="#什么是闭包-堆栈溢出有什么区别？-内存泄漏-那些操作会造成内存泄漏？怎么样防止内存泄漏？impression" class="headerlink" title="什么是闭包?堆栈溢出有什么区别？ 内存泄漏? 那些操作会造成内存泄漏？怎么样防止内存泄漏？impression"></a>什么是闭包?堆栈溢出有什么区别？ 内存泄漏? 那些操作会造成内存泄漏？怎么样防止内存泄漏？impression</h2><p>闭包：就是能够读取其他函数内部变量的函数。一般是指内层函数。(子函数在外调用，子函数所在的父函数的作用域不会被释放。) </p>
<p>堆栈溢出：就是不顾堆栈中分配的局部数据块大小，向该数据块写入了过多的数据，导致数据越界，结果覆盖了别的数据。经常会在递归中发生。</p>
<p>内存泄漏是指：用动态存储分配函数内存空间，在使用完毕后未释放，导致一直占据该内存单元。直到程序结束。指任何对象在您不再拥有或需要它之后仍然存在。</p>
<p>造成内存泄漏：
setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）</p>
<p>防止内存泄漏：<br>1、不要动态绑定事件；<br>2、不要在动态添加，或者会被动态移除的dom上绑事件，用事件冒泡在父容器监听事件；<br>3、如果要违反上面的原则，必须提供destroy方法，保证移除dom后事件也被移除，这点可以参考Backbone的源代码，做的比较好；<br>4、单例化，少创建dom，少绑事件。</p>
<p>原因：</p>
<ul>
<li>全局变量</li>
<li>闭包</li>
<li>dom清空，事件未清除</li>
<li>子元素存在引用</li>
<li>计时器未删除</li>
</ul>
<h2 id="html和xhtml有什么区别"><a href="#html和xhtml有什么区别" class="headerlink" title="html和xhtml有什么区别?"></a>html和xhtml有什么区别?</h2><p>HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的标记语言。</p>
<p>1.XHTML 元素必须被正确地嵌套。</p>
<p>2.XHTML 元素必须被关闭。</p>
<p>3.标签名必须用小写字母。</p>
<p>4.空标签也必须被关闭。</p>
<p>5.XHTML 文档必须拥有根元素。</p>
<h2 id="什么是构造函数？与普通函数有什么区别"><a href="#什么是构造函数？与普通函数有什么区别" class="headerlink" title="什么是构造函数？与普通函数有什么区别?"></a>什么是构造函数？与普通函数有什么区别?</h2><p>构造函数：是一种特殊的方法(函数、对象)、主要用来创建对象时初始化对象，总与new运算符一起使用，创建对象的语句中构造函数的函数名必须与类名完全相同。</p>
<p>与普通函数相比只能由new关键字调用，构造函数是类的标识。</p>
<h2 id="通过new创建一个对象的时候，函数内部有哪些改变？"><a href="#通过new创建一个对象的时候，函数内部有哪些改变？" class="headerlink" title="通过new创建一个对象的时候，函数内部有哪些改变？"></a>通过new创建一个对象的时候，函数内部有哪些改变？</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params"></span>)</span>&#123;&#125;</span><br><span class="line">Person.prototype.friend = [];</span><br><span class="line">Person.prototype.age = <span class="number">18</span>;</span><br><span class="line">  <span class="keyword">var</span> a = <span class="keyword">new</span> Person();</span><br><span class="line">  a.friend[<span class="number">0</span>] = <span class="string">'方涛'</span>; <span class="comment">// a.friend=['123'] 指向新对象 b.friend // []</span></span><br><span class="line">  a.age = <span class="number">18</span>;</span><br><span class="line">  <span class="keyword">var</span> b = <span class="keyword">new</span> Person();</span><br><span class="line">  b.friend <span class="comment">// ['方涛'] </span></span><br><span class="line">  b.age   <span class="comment">// 18</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。<br>2、属性和方法被加入到 this 引用的对象中。<br>3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。</p>
</blockquote>
<p><code>new 操作符新建了一个空对象，这个对象原型指向构造函数的prototype，执行构造函数后返回这个对象。</code></p>
<ul>
<li><p>创建一个空对象：var obj = {}</p>
</li>
<li><p>将空对象的<strong>proto</strong>指向构造函数的 prototype：obj.<strong>proto</strong> = Person().prototype</p>
</li>
<li><p>使用空对象作为上下文调用构造函数： Person.call(obj)</p>
</li>
</ul>
<h2 id="事件委托的好处都有啥？说对了都给它-3"><a href="#事件委托的好处都有啥？说对了都给它-3" class="headerlink" title="事件委托的好处都有啥？说对了都给它=3="></a>事件委托的好处都有啥？说对了都给它=3=</h2><ul>
<li><p>利用冒泡的原理，把事件加到父级上，触发执行效果  </p>
</li>
<li><p>好处：新添加的元素还会有之前的事件；提高性能。</p>
</li>
</ul>
<h2 id="节点类型-判断当前节点类型"><a href="#节点类型-判断当前节点类型" class="headerlink" title="节点类型?判断当前节点类型?"></a>节点类型?判断当前节点类型?</h2><ul>
<li>元素节点 </li>
<li>属性节点 </li>
<li>文本节点 </li>
<li>注释节点 </li>
<li>文档节点</li>
</ul>
<p>通过nodeObject.nodeType判断节点类型：其中，nodeObject 为DOM节点（节点对象）。该属性返回以数字表示的节点类型，例如，元素节点返回 1，属性节点返回 2 。</p>
<h2 id="数组合并的方法？"><a href="#数组合并的方法？" class="headerlink" title="数组合并的方法？"></a>数组合并的方法？</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 四种方法。</span></span><br><span class="line"><span class="keyword">var</span> arr1=[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>];</span><br><span class="line"><span class="keyword">var</span> arr2=[<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>];</span><br><span class="line">arr1 = arr1.concat(arr2);</span><br><span class="line"><span class="built_in">console</span>.log(arr1); </span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> arr1=[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>];</span><br><span class="line"><span class="keyword">var</span> arr2=[<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>];</span><br><span class="line"><span class="built_in">Array</span>.prototype.push.apply(arr1,arr2);</span><br><span class="line"><span class="built_in">console</span>.log(arr1);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> arr1=[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>];</span><br><span class="line"><span class="keyword">var</span> arr2=[<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>];</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>; i &lt; arr2.length; i++) &#123;</span><br><span class="line">arr1.push( arr2[i] );</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(arr1); </span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> arr1=[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>];</span><br><span class="line"><span class="keyword">var</span> arr2=[<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>];</span><br><span class="line"></span><br><span class="line">arr1.push(...arr2)</span><br></pre></td></tr></table></figure>
<h2 id="jquery和zepto有什么区别"><a href="#jquery和zepto有什么区别" class="headerlink" title="jquery和zepto有什么区别?"></a>jquery和zepto有什么区别?</h2><ul>
<li><p>针对移动端程序，Zepto有一些基本的触摸事件可以用来做触摸屏交互（tap事件、swipe事件），Zepto是不支持IE浏览器的，这不是Zepto的开发者Thomas Fucks在跨浏览器问题上犯了迷糊，而是经过了认真考虑后为了降低文件尺寸而做出的决定，就像jQuery的团队在2.0版中不再支持旧版的IE（6 7 8）一样。因为Zepto使用jQuery句法，所以它在文档中建议把jQuery作为IE上的后备库。那样程序仍能在IE中，而其他浏览器则能享受到Zepto在文件大小上的优势，然而它们两个的API不是完全兼容的，所以使用这种方法时一定要小心，并要做充分的测试。</p>
</li>
<li><p>Dom操作的区别：添加id时jQuery不会生效而Zepto会生效。</p>
</li>
<li><p>zepto主要用在移动设备上，只支持较新的浏览器，好处是代码量比较小，性能也较好。
jquery主要是兼容性好，可以跑在各种pc，移动上，好处是兼容各种浏览器，缺点是代码量大，同时考虑兼容，性能也不够好。</p>
</li>
</ul>
<h2 id="function-和window-onload-和-document-ready-function"><a href="#function-和window-onload-和-document-ready-function" class="headerlink" title="$(function(){})和window.onload 和 $(document).ready(function(){})"></a>$(function(){})和window.onload 和 $(document).ready(function(){})</h2><ul>
<li><p>window.onload:用于当页面的所有元素，包括外部引用文件，图片等都加载完毕时运行函数内的函数。load方法只能执行一次，如果在js文件里写了多个，只能执行最后一个。</p>
</li>
<li><p>$(document).ready(function(){})和$(function(){})都是用于当页面的标准DOM元素被解析成DOM树后就执行内部函数。这个函数是可以在js文件里多次编写的，对于多人共同编写的js就有很大的优势，因为所有行为函数都会执行到。而且$(document).ready()函数在HMTL结构加载完后就可以执行，不需要等大型文件加载或者不存在的连接等耗时工作完成才执行，效率高。</p>
</li>
</ul>
<h2 id="简述下-this-和定义属性和方法的时候有什么区别-Prototype？"><a href="#简述下-this-和定义属性和方法的时候有什么区别-Prototype？" class="headerlink" title="简述下 this 和定义属性和方法的时候有什么区别?Prototype？"></a>简述下 this 和定义属性和方法的时候有什么区别?Prototype？</h2><ul>
<li><p>this表示当前对象，如果在全局作用范围内使用this，则指代当前页面对象window； 如果在函数中使用this，则this指代什么是根据运行时此函数在什么对象上被调用。 我们还可以使用apply和call两个全局方法来改变函数中this的具体指向。</p>
</li>
<li><p>prototype本质上还是一个JavaScript对象。 并且每个函数都有一个默认的prototype属性。</p>
</li>
<li><p>在prototype上定义的属性方法为所有实例共享，所有实例皆引用到同一个对象，单一实例对原型上的属性进行修改，也会影响到所有其他实例。</p>
</li>
</ul>
<h2 id="ajax和jsonp的区别？"><a href="#ajax和jsonp的区别？" class="headerlink" title="ajax和jsonp的区别？"></a>ajax和jsonp的区别？</h2><ul>
<li>相同点：都是请求一个url</li>
<li>不同点：ajax的核心是通过XMLHttpRequest获取内容，jsonp只能get请求</li>
<li>jsonp的核心则是动态添加<code>&lt;script&gt;</code>标签来调用服务器提供的js脚本。</li>
</ul>
<h2 id="常见的http协议状态码？"><a href="#常见的http协议状态码？" class="headerlink" title="常见的http协议状态码？"></a>常见的http协议状态码？</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">200</span>：请求成功</span><br><span class="line"><span class="number">201</span>：请求成功并且服务器创建了新的资源</span><br><span class="line"><span class="number">302</span>：服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来响应以后的请求。</span><br><span class="line"><span class="number">304</span>：自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。</span><br><span class="line"><span class="number">400</span>：服务器不理解请求的语法。</span><br><span class="line"><span class="number">404</span>：请求的资源（网页等）不存在</span><br><span class="line"><span class="number">403</span>：该状态表示服务器理解了本次请求但是拒绝执行该任务</span><br><span class="line"><span class="number">405</span>：方法不被允许</span><br><span class="line"><span class="number">500</span>：内部服务器错误</span><br></pre></td></tr></table></figure>
<h2 id="sessionStorage和localstroage与cookie之间有什么关联-cookie最大存放多少字节？"><a href="#sessionStorage和localstroage与cookie之间有什么关联-cookie最大存放多少字节？" class="headerlink" title="sessionStorage和localstroage与cookie之间有什么关联, cookie最大存放多少字节？"></a>sessionStorage和localstroage与cookie之间有什么关联, cookie最大存放多少字节？</h2><p>三者共同点：都是保存在浏览器端，且同源的。</p>
<p>区别:
1、cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存</p>
<p>2、存储大小限制也不同，cookie数据不能超过4k，sessionStorage和localStorage 但比cookie大得多，可以达到5M</p>
<p>3、数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭</p>
<p>4、作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面(即数据不共享)；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的( 即数据共享 )。</p>
<h2 id="ajax的get与post区别？"><a href="#ajax的get与post区别？" class="headerlink" title="ajax的get与post区别？"></a>ajax的get与post区别？</h2><ul>
<li>get和post都是数据提交的方式。</li>
<li>get的数据是通过网址问号后边拼接的字符串进行传递的。post是通过一个HTTP包(request body)进行传递数据的。</li>
<li>get的传输量是有限制的，post是没有限制的。(实际上HTTP 协议从未规定 GET/POST 的请求长度限制是多少。对get请求参数的限制是来源与浏览器或web服务器，浏览器或web服务器限制了url的长度)</li>
<li>get的安全性可能没有post高，所以我们一般用get来获取数据，post一般用来修改数据。</li>
<li>get请求, 倒退按钮是无害的, post会重新发起请求</li>
<li>get会主动缓存, post不会</li>
<li>get请求只能进行url编码，而post请求支持多种编码</li>
<li>get产生一个TCP数据包，POST产生两个TCP数据包</li>
</ul>
<p>get就是将货品放在车顶，post放在车内。</p>
<h2 id="GC机制？为什么闭包不会被回收变量和函数？"><a href="#GC机制？为什么闭包不会被回收变量和函数？" class="headerlink" title="GC机制？为什么闭包不会被回收变量和函数？"></a>GC机制？为什么闭包不会被回收变量和函数？</h2><ul>
<li>GC：垃圾回收机制;  </li>
<li>外部变量没释放仍然保持着引用，所以指向的大函数内的小函数也释放不了。
引用类型是在没有引用之后, 通过 v8 的 GC 自动回收, 值类型如果是处于闭包的情况下, 要等闭包没有引用才会被 GC 回收, 非闭包的情况下等待 v8 的新生代 (new space) 切换的时候回收。</li>
</ul>
<p>回收方法有两种：标记清除、计数引用</p>
<p>33 面向对象？
万物皆对象，把一个对象抽象成类，具体上就是把一个对象的静态特征和动态特征抽象成属性（属性名、属性值）和方法，也就是把一类事物的算法和数据结构封装在一个类之中，程序就是多个对象和互相之间的通信组成的。</p>
<p>面向对象具有封装性，继承性，多态性。
封装：隐蔽了对象内部不需要暴露的细节，使得内部细节的变动跟外界脱离，只依靠接口进行通信。封装性降低了编程的复杂性。通过继承，使得新建一个类变得容易，一个类从派生类那里获得其非私有的方法和公用属性的繁琐工作交给了编译器。而继承和实现接口和运行时的类型绑定机制所产生的多态，使得不同的类所产生的对象能够对相同的消息作出不同的反应，极大地提高了代码的通用性。</p>
<p>总之，面向对象的特性提高了大型程序的重用性和可维护性。</p>
<h2 id="jsonp的原理和缺点？"><a href="#jsonp的原理和缺点？" class="headerlink" title="jsonp的原理和缺点？"></a>jsonp的原理和缺点？</h2><ul>
<li>原理：使用script标签实现跨域访问，可在url中指定回调函数，获取JSON数据并在指定的回调函数中执行jquery实现jsop。</li>
<li>缺点：只支持GET方式的jsonp实现，是一种脚本注入行为存在一定的安全隐患。如果返回的数据格式有问题或者返回失败了，并不会报错。</li>
</ul>
<h2 id="call和apply两者的区别和好处？"><a href="#call和apply两者的区别和好处？" class="headerlink" title="call和apply两者的区别和好处？"></a>call和apply两者的区别和好处？</h2><ul>
<li>call和apply都是改变this指向的方法，区别在于call可以写多个参数，而apply只能写两个参数，第二个参数是一个数组，用于存放要传的参数。</li>
<li>用call和apply实现更好的继承和扩展，更安全。</li>
</ul>
<h2 id="压缩合并目的？http请求的优化方式？"><a href="#压缩合并目的？http请求的优化方式？" class="headerlink" title="压缩合并目的？http请求的优化方式？"></a>压缩合并目的？http请求的优化方式？</h2><ul>
<li><p>Web性能优化最佳实践中最重要的一条是减少HTTP请求。而减少HTTP请求的最主要的方式就是，合并并压缩JavaScript和CSS文件。 </p>
</li>
<li><p>CSS Sprites（雪碧图、CSS精灵）：把全站的图标都放在一个图像文件中，然后用CSS的background-image和background-position属性定位来显示其中的一小部分。</p>
</li>
</ul>
<p>优点：</p>
<ol>
<li>减少 HTTP 请求数，极大地提高页面加载速度</li>
<li>增加图片信息重复度，提高压缩比，减少图片大小</li>
<li>更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现</li>
</ol>
<p>缺点：</p>
<ol>
<li>图片合并麻烦</li>
<li>维护麻烦，修改一个图片可能需要重新布局整个图片，样式</li>
</ol>
<ul>
<li><p>合并脚本和样式表; 图片地图：利用image map标签定义一个客户端图像映射，（图像映射指带有可点击区域的一幅图像）具体看：<a href="http://club.topsage.com/thread-2527479-1-1.html" target="_blank" rel="noopener">http://club.topsage.com/thread-2527479-1-1.html</a> </p>
</li>
<li><p>图片js/css等静态资源放在静态服务器或CDN服务器时，尽量采用不用的域名，这样能防止cookie不会互相污染，减少每次请求的往返数据。 </p>
</li>
<li><p>css替代图片, 缓存一些数据 </p>
</li>
<li><p>少用location.reload()：使用location.reload() 会刷新页面，刷新页面时页面所有资源 (css，js，img等) 会重新请求服务器。建议使用location.href=”当前页url” 代替location.reload() ，使用location.href 浏览器会读取本地缓存资源。</p>
</li>
<li><p>图片懒加载 </p>
</li>
</ul>
<h2 id="commonjs-requirejs-AMD-CMD-UMD"><a href="#commonjs-requirejs-AMD-CMD-UMD" class="headerlink" title="commonjs?requirejs?AMD|CMD|UMD?"></a>commonjs?requirejs?AMD|CMD|UMD?</h2><ul>
<li><p>CommonJS就是为JS的表现来制定规范，NodeJS是这种规范的实现，webpack 也是以CommonJS的形式来书写。因为js没有模块的功能，所以CommonJS应运而生。但它不能在浏览器中运行。 CommonJS定义的模块分为:{模块引用(require)} {模块定义(exports)} {模块标识(module)} </p>
</li>
<li><p>RequireJS 是一个JavaScript模块加载器。 RequireJS有两个主要方法(method): define()和require()。这两个方法基本上拥有相同的定义(declaration) 并且它们都知道如何加载的依赖关系，然后执行一个回调函数(callback function)。与require()不同的是， define()用来存储代码作为一个已命名的模块。 因此define()的回调函数需要有一个返回值作为这个模块定义。这些类似被定义的模块叫作AMD (Asynchronous Module Definition，异步模块定义)。 </p>
</li>
<li><p>AMD 是 RequireJS 在推广过程中对模块定义的规范化产出 AMD异步加载模块。它的模块支持对象 函数 构造器 字符串 JSON等各种类型的模块。 适用AMD规范适用define方法定义模块。</p>
</li>
<li><p>CMD是SeaJS 在推广过程中对模块定义的规范化产出
AMD与CMD的区别：
（1）对于于依赖的模块，AMD 是提前执行(requirejs2.0+可以延迟执行了)，CMD 是延迟执行。
（2）AMD 推崇依赖前置，CMD 推崇依赖就近。
（3）AMD 推崇复用接口，CMD 推崇单用接口。
（4）书写规范的差异。</p>
</li>
<li><p>umd是AMD和CommonJS的糅合。
AMD 浏览器第一的原则发展 异步加载模块。
CommonJS模块以服务器第一原则发展，选择同步加载，它的模块无需包装(unwrapped modules)。这迫使人们又想出另一个更通用的模式UMD ( Universal Module Definition ), 希望解决跨平台的解决方案。UMD先判断是否支持Node.js的模块( exports )是否存在，存在则使用Node.js模块模式。</p>
</li>
</ul>
<p>CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。</p>
<h2 id="js的几种继承方式？"><a href="#js的几种继承方式？" class="headerlink" title="js的几种继承方式？"></a>js的几种继承方式？</h2><ul>
<li>使用对象冒充实现继承</li>
<li>call、apply改变函数上下文实现继承</li>
<li>原型链方式实现继承</li>
</ul>
<h2 id="js原型、原型链，有什么特点？"><a href="#js原型、原型链，有什么特点？" class="headerlink" title="js原型、原型链，有什么特点？"></a>js原型、原型链，有什么特点？</h2><p>在JavaScript中,一共有两种类型的值,原始值和对象值.每个对象都有一个内部属性[[prototype]],我们通常称之为原型.原型的值可以是一个对象,也可以是null.如果它的值是一个对象,则这个对象也一定有自己的原型.这样就形成了一条线性的链,我们称之为原型链. </p>
<p>访问一个对象的原型可以使用ES5中的Object.getPrototypeOf方法,或者ES6中的<strong>proto</strong>属性. 原型链的作用是用来实现继承,比如我们新建一个数组,数组的方法就是从数组的原型上继承而来的。</p>
<p>类的继承
特点：基于原型链，既是父类的实例，也是子类的实例
缺点：无法实现多继承</p>
<p>构造继承、组合继承、实例继承和拷贝继承…</p>
<h2 id="eval是做什么的？"><a href="#eval是做什么的？" class="headerlink" title="eval是做什么的？"></a>eval是做什么的？</h2><ul>
<li>将把对应的字符串解析成JS代码并运行； 应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。</li>
<li>由JSON字符串转换为JSON对象的时候可以用eval，var obj =eval(‘(‘+ str +’)’);</li>
</ul>
<h2 id="null和undefined"><a href="#null和undefined" class="headerlink" title="null和undefined"></a>null和undefined</h2><ul>
<li>null         表示一个对象是“没有值”的值，也就是值为“空”；</li>
<li>undefined     表示一个变量声明了没有初始化(赋值)；</li>
</ul>
<h2 id="json的理解？"><a href="#json的理解？" class="headerlink" title="json的理解？"></a>json的理解？</h2><ul>
<li>JSON（轻量级的数据交换格式），基于JS的子集，数据格式简单，易于读写，占用带宽小。<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">JSON</span>.parse() <span class="comment">// 解析成JSON对象</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">JSON</span>.strinify() <span class="comment">// 解析成JSON字符串</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
<h2 id="js延时加载的方式？"><a href="#js延时加载的方式？" class="headerlink" title="js延时加载的方式？"></a>js延时加载的方式？</h2><ul>
<li>defer(仅ie支持)和async</li>
<li>动态创建DOM</li>
<li>按需异步加载JS</li>
</ul>
<h2 id="ajax（异步的js和xml）"><a href="#ajax（异步的js和xml）" class="headerlink" title="ajax（异步的js和xml）"></a>ajax（异步的js和xml）</h2><ul>
<li>ajax是指一种创建交互式网页应用的网页开发技术。通过后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。</li>
</ul>
<h2 id="同异步的区别？"><a href="#同异步的区别？" class="headerlink" title="同异步的区别？"></a>同异步的区别？</h2><ul>
<li>同步(sync)：按顺序执行。</li>
<li>异步(async)：不按顺序执行，可以跳过执行下面的代码。</li>
</ul>
<h3 id="什么是异步"><a href="#什么是异步" class="headerlink" title="什么是异步"></a>什么是异步</h3><p>当前一个任务被执行时，不会等待任务执行完成后就去执行下一个任务，等前一个任务执行完成后，将去执行其返回的回调函数，这是异步操作。</p>
<h3 id="为什么要异步"><a href="#为什么要异步" class="headerlink" title="为什么要异步"></a>为什么要异步</h3><p>js是单线程的，因此必须等前一个任务完成后，后一个任务才会被执行。因此当执行一段耗时的程序时，会影响整个程序的执行，异步的方法就是为了解决这个问题。</p>
<h2 id="ajax的缺点？"><a href="#ajax的缺点？" class="headerlink" title="ajax的缺点？"></a>ajax的缺点？</h2><ul>
<li>不支持浏览器的back按钮(事件由浏览器内核控制)</li>
<li>ajax暴露了与服务器的交互</li>
<li>对搜索引擎的支持较弱</li>
<li>破坏了程序的异常机制</li>
<li>不容易调试</li>
</ul>
<h2 id="跨域问题？"><a href="#跨域问题？" class="headerlink" title="跨域问题？"></a>跨域问题？</h2><h3 id="同源策略"><a href="#同源策略" class="headerlink" title="同源策略"></a>同源策略</h3><p>同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键安全机制。</p>
<ul>
<li>协议不同</li>
<li>端口不同</li>
<li>域名不同</li>
<li>常用解决方案：</li>
</ul>
<ol>
<li>jsonp<blockquote>
<script src="http://example.com/data.php?callback=do"></script></blockquote>
</li>
<li>iframe</li>
<li>window.name
在一个窗口中，窗口载入的所有页面共享一个window.name，每个页面都对window.name具有读写权限，可以在window.name中设置想要的数据。</li>
<li><p>window.postMessage</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// iframe通信</span></span><br><span class="line">iframe.contentWindow.postMessage(msg);</span><br><span class="line"><span class="built_in">window</span>.onmessage = <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>&#123;</span><br><span class="line">    e = e || event;</span><br><span class="line">    alert(e.data);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>document.domain
将两个页面的document.domain设置成相同域名即可，js中设置，形如：
document.domain = “”;</p>
</li>
<li>服务器设置代理页面/响应header配置cors access-control-allow-origin
CORS全称“ Cross-origin resource sharing ”（跨域资源共享），相比JSONP， CORS允许任何类型的请求 。</li>
</ol>
<blockquote>
<p>CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。</p>
</blockquote>
<blockquote>
<p>整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨
源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。</p>
</blockquote>
<blockquote>
<p>因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。</p>
</blockquote>
<ol>
<li>nginx反向代理、nodejs反向代理</li>
</ol>
<ul>
<li><p>http-proxy-middleware 插件</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> express = <span class="built_in">require</span>(<span class="string">'express'</span>);</span><br><span class="line"><span class="keyword">var</span> proxy = <span class="built_in">require</span>(<span class="string">'http-proxy-middleware'</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> app = express();</span><br><span class="line"></span><br><span class="line">app.use(<span class="string">'/zhuiszhu'</span>, proxy(&#123;<span class="attr">target</span>: <span class="string">'http://39.105.136.190:3000/'</span>, <span class="attr">changeOrigin</span>: <span class="literal">true</span>&#125;));</span><br><span class="line">app.listen(<span class="number">3000</span>);</span><br></pre></td></tr></table></figure>
</li>
<li><p>webpack-dev-server</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">devServer: &#123;</span><br><span class="line">        port: <span class="number">3000</span>,</span><br><span class="line">        inline: <span class="literal">true</span>,</span><br><span class="line">        proxy: &#123;</span><br><span class="line">            <span class="string">"/zhuiszhu"</span>: &#123;</span><br><span class="line">                target: <span class="string">"http://39.105.136.190:3000/"</span>,</span><br><span class="line">                changeOrigin: <span class="literal">true</span>  <span class="comment">//必须配置为true，才能正确代理</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure>
</li>
</ul>
<p>webpack 的 devServer.proxy 就是使用了非常强大的 http-proxy-middleware 包来实现代理的，所以本质上是相通的。</p>
<ol>
<li>WebSocket
WebSocket是一种通信协议，使用ws://（非加密）和wss://（加密）作为协议前缀。该协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信。</li>
</ol>
<p>由于发出的WebSocket请求中有有一个字段是Origin，表示该请求的请求源（origin），即发自哪个域名。</p>
<p>正是因为有了Origin这个字段，所以WebSocket才没有实行同源政策。因为服务器可以根据这个字段，判断是否许可本次通信。
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> ws = <span class="keyword">new</span> WebSocket(<span class="string">'wss://echo.websocket.org'</span>);</span><br><span class="line">ws.onopen = <span class="function"><span class="keyword">function</span> (<span class="params">evt</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'Connection open ...'</span>);</span><br><span class="line">  ws.send(<span class="string">'Hello WebSockets!'</span>);</span><br><span class="line">&#125;;</span><br><span class="line">ws.onmessage = <span class="function"><span class="keyword">function</span> (<span class="params">evt</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'Received Message: '</span>, evt.data);</span><br><span class="line">  ws.close();</span><br><span class="line">&#125;;</span><br><span class="line">ws.onclose = <span class="function"><span class="keyword">function</span> (<span class="params">evt</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'Connection closed.'</span>);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">前后端通信方式</span><br><span class="line">Ajax 支持同源通信</span><br><span class="line">WebSocket 不受同源策略影响</span><br><span class="line">CORS 既支持同源通信也支持跨域通信</span><br></pre></td></tr></table></figure>
<h2 id="解决异步回调地狱有哪些方案？"><a href="#解决异步回调地狱有哪些方案？" class="headerlink" title="解决异步回调地狱有哪些方案？"></a>解决异步回调地狱有哪些方案？</h2><ul>
<li>promise</li>
<li>generator</li>
<li>async/await</li>
</ul>
<h2 id="图片的预加载和懒加载？"><a href="#图片的预加载和懒加载？" class="headerlink" title="图片的预加载和懒加载？"></a>图片的预加载和懒加载？</h2><ul>
<li>预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染，加快响应速度。</li>
<li>懒加载：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。</li>
</ul>
<p>两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。 懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。</p>
<h2 id="mouseover和mouseenter的区别？"><a href="#mouseover和mouseenter的区别？" class="headerlink" title="mouseover和mouseenter的区别？"></a>mouseover和mouseenter的区别？</h2><ul>
<li><p>mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡的过程。对应的移除事件是mouseout</p>
</li>
<li><p>mouseenter：当鼠标移除元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡，对应的移除事件是mouseleave</p>
</li>
<li><p>onmousedown 当元素上按下鼠标按钮时出发</p>
</li>
<li>onmousemove 当鼠标指针移动到元素上移动触发</li>
<li>onmouseover 当鼠标指针移动元素上时触发</li>
<li>onmouseout 当鼠标指针移出指定的对象时发生。</li>
<li>onmouseup 当在元素上释放鼠标按钮时触发</li>
<li>onmouseenter 事件在鼠标指针移动到元素上时触发。(不冒泡)</li>
<li>onmouseleave 事件在鼠标移除元素时触发。(不冒泡)</li>
</ul>
<h2 id="改变函数内部this指针的指向函数（bind，apply，call的区别）？"><a href="#改变函数内部this指针的指向函数（bind，apply，call的区别）？" class="headerlink" title="改变函数内部this指针的指向函数（bind，apply，call的区别）？"></a>改变函数内部this指针的指向函数（bind，apply，call的区别）？</h2><ul>
<li><p>通过apply和call改变函数的this指向，他们两个函数的第一个参数都是一样的表示要改变指向的那个对象，第二个参数，apply是数组，而call则是arg1,arg2…这种形式。</p>
</li>
<li><p>通过bind改变this作用域会返回一个新的函数，这个函数不会马上执行。</p>
</li>
</ul>
<h2 id="说说前端中的事件流"><a href="#说说前端中的事件流" class="headerlink" title="说说前端中的事件流"></a>说说前端中的事件流</h2><p>HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件onclick、页面的滚动事件onscroll等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念。
什么是事件流：事件流描述的是从页面中接收事件的顺序,DOM2级事件流包括下面几个阶段。</p>
<p>事件捕获阶段
处于目标阶段
事件冒泡阶段</p>
<p>addEventListener：addEventListener 是DOM2 级事件新增的指定事件处理程序的操作，这个方法接收3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。
IE只支持事件冒泡。</p>
<h2 id="如何让事件先冒泡后执行？"><a href="#如何让事件先冒泡后执行？" class="headerlink" title="如何让事件先冒泡后执行？"></a>如何让事件先冒泡后执行？</h2><p>在DOM标准事件模型中，是先捕获后冒泡。但是如果要实现先冒泡后捕获的效果，分别为某一元素先后绑定两个监听器，第一个监听器第三个参数设为false，第二个监听器第三个参数设为true。</p>
<h2 id="什么是事件委托？（事件代理）"><a href="#什么是事件委托？（事件代理）" class="headerlink" title="什么是事件委托？（事件代理）"></a>什么是事件委托？（事件代理）</h2><p>简介：事件委托指的是，不在事件的发生地（直接dom）上设置监听函数，而是在其父元素上设置监听函数，通过事件冒泡，父元素可以监听到子元素上事件的触发，通过判断事件发生元素DOM的类型，来做出不同的响应。</p>
<p>捕获阶段的实际应用：可以在父元素层面阻止事件向子元素传播，也可以代替子元素执行某些操作。</p>
<p>举例：最经典的就是ul和li标签的事件监听，比如我们在添加事件时候，采用事件委托机制，不会在li标签上直接添加，而是在ul父元素上添加。</p>
<p>好处：</p>
<ol>
<li>减少内存消耗，提高性能(不需要为每一个子元素绑定事件)</li>
<li>动态绑定事件</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ul</span> <span class="attr">id</span>=<span class="string">"proxy"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">button</span> <span class="attr">id</span>=<span class="string">"1"</span>&gt;</span>1<span class="tag">&lt;/<span class="name">button</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">button</span> <span class="attr">id</span>=<span class="string">"2"</span>&gt;</span>2<span class="tag">&lt;/<span class="name">button</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">button</span> <span class="attr">id</span>=<span class="string">"3"</span>&gt;</span>3<span class="tag">&lt;/<span class="name">button</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">main</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> proxy = <span class="built_in">document</span>.getElementById(<span class="string">'proxy'</span>)</span><br><span class="line"></span><br><span class="line">  proxy.addEventListener(<span class="string">'click'</span>, event =&gt; &#123;</span><br><span class="line">    <span class="keyword">const</span> currentTarget = event.target</span><br><span class="line">    <span class="keyword">const</span> id = currentTarget.id</span><br><span class="line">    <span class="keyword">switch</span> (id) &#123;</span><br><span class="line">      <span class="keyword">case</span> <span class="string">'1'</span>:</span><br><span class="line">        alert(<span class="string">`proxy: <span class="subst">$&#123;<span class="number">1</span>&#125;</span>`</span>)</span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">      <span class="keyword">case</span> <span class="string">'2'</span>:</span><br><span class="line">        alert(<span class="string">`proxy: <span class="subst">$&#123;<span class="number">2</span>&#125;</span>`</span>)</span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">      <span class="keyword">case</span> <span class="string">'3'</span>:</span><br><span class="line">        alert(<span class="string">`proxy: <span class="subst">$&#123;<span class="number">3</span>&#125;</span>`</span>)</span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">      <span class="keyword">default</span>:</span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>event.target &amp; event.currentTarget<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line">&lt;div id=<span class="string">"a"</span>&gt;</span><br><span class="line">    aaaa</span><br><span class="line">  &lt;div id=<span class="string">"b"</span>&gt;</span><br><span class="line">      bbbb</span><br><span class="line">    &lt;div id=<span class="string">"c"</span>&gt;</span><br><span class="line">        cccc</span><br><span class="line">      &lt;div id=<span class="string">"d"</span>&gt;</span><br><span class="line">          dddd</span><br><span class="line">      &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">    &lt;/</span>div&gt;</span><br><span class="line">  &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>div&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="built_in">document</span>.getElementById(<span class="string">"a"</span>).addEventListener(<span class="string">"click"</span>, <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(</span><br><span class="line">            <span class="string">"target:"</span> + e.target.id + <span class="string">"&amp;currentTarget:"</span> + e.currentTarget.id</span><br><span class="line">        );</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="built_in">document</span>.getElementById(<span class="string">"b"</span>).addEventListener(<span class="string">"click"</span>, <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(</span><br><span class="line">            <span class="string">"target:"</span> + e.target.id + <span class="string">"&amp;currentTarget:"</span> + e.currentTarget.id</span><br><span class="line">        );</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="built_in">document</span>.getElementById(<span class="string">"c"</span>).addEventListener(<span class="string">"click"</span>, <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(</span><br><span class="line">            <span class="string">"target:"</span> + e.target.id + <span class="string">"&amp;currentTarget:"</span> + e.currentTarget.id</span><br><span class="line">        );</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="built_in">document</span>.getElementById(<span class="string">"d"</span>).addEventListener(<span class="string">"click"</span>, <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(</span><br><span class="line">            <span class="string">"target:"</span> + e.target.id + <span class="string">"&amp;currentTarget:"</span> + e.currentTarget.id</span><br><span class="line">        );</span><br><span class="line">    &#125;);</span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/ 当我们点击最里层的元素d的时候，会依次输出:</span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/ target:d&amp;currentTarget:d</span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/ target:d&amp;currentTarget:c</span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/ target:d&amp;currentTarget:b</span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/ target:d&amp;currentTarget:a</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
<p>event.target始终是事件的真正发出者，而event.currentTarget始终是监听事件者。</p>
<h2 id="垂直居中"><a href="#垂直居中" class="headerlink" title="垂直居中"></a>垂直居中</h2><ol>
<li><p>margin:auto法</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span>&#123;</span><br><span class="line">    <span class="attribute">width</span>:<span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">margin</span>:<span class="number">0</span> auto;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* 绝对定位居中 */</span></span><br><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">300px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">300px</span>;</span><br><span class="line">    <span class="attribute">margin</span>: auto;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">bottom</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">right</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: pink;    <span class="comment">/* 方便看效果 */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>margin负值法 relative -&gt; absolute </p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: relative;        <span class="comment">/* 相对定位或绝对定位均可 */</span></span><br><span class="line">    <span class="attribute">width</span>:<span class="number">500px</span>;</span><br><span class="line">    <span class="attribute">height</span>:<span class="number">300px</span>;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">50%</span>;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">50%</span>;</span><br><span class="line">    <span class="attribute">margin</span>: -<span class="number">150px</span> <span class="number">0</span> <span class="number">0</span> -<span class="number">250px</span>;         <span class="comment">/* 外边距为自身宽高的一半 */</span></span><br><span class="line">    <span class="comment">/* transform: translate(-50%, -50%); */</span></span><br><span class="line">    <span class="attribute">background-color</span>: pink;         <span class="comment">/* 方便看效果 */</span></span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>flex布局</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: flex;</span><br><span class="line">    <span class="attribute">align-items</span>: center;         <span class="comment">/* 垂直居中 */</span></span><br><span class="line">    <span class="attribute">justify-content</span>: center;    <span class="comment">/* 水平居中 */</span></span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.container</span> <span class="selector-tag">div</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: pink;        <span class="comment">/* 方便看效果 */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>table-cell未脱离文档流 设置父元素的display:table-cell,并且vertical-align:middle，这样子元素可以实现垂直居中。</p>
</li>
<li>text-align:center 块级元素</li>
</ol>
<h2 id="visibility-hidden-opacity-0，display-none"><a href="#visibility-hidden-opacity-0，display-none" class="headerlink" title="visibility=hidden, opacity=0，display:none"></a>visibility=hidden, opacity=0，display:none</h2><ul>
<li>opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的</li>
<li>visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件。</li>
<li>display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样。</li>
</ul>
<h2 id="块元素和行内元素"><a href="#块元素和行内元素" class="headerlink" title="块元素和行内元素"></a>块元素和行内元素</h2><ul>
<li>块元素：独占一行，并且有自动填满父元素，可以设置margin和padding以及高度和宽度。</li>
<li>行元素：不会独占一行，width和height会失效，并且在垂直方向的padding和margin会失效。  </li>
</ul>
<h2 id="深拷贝"><a href="#深拷贝" class="headerlink" title="深拷贝"></a>深拷贝</h2><ul>
<li>深拷贝的方法 1-2适用于一般的对象和数组 4-5适用于数组 3通用</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    a: <span class="number">1</span>,</span><br><span class="line">    arr: [<span class="number">1</span>, <span class="number">2</span>]</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">let</span> obj2 = deepCopy(obj);</span><br><span class="line">obj2.a = <span class="number">2</span></span><br><span class="line"><span class="built_in">console</span>.log(obj) <span class="comment">// &#123; a:1, arr: [1,2] &#125;;</span></span><br><span class="line"><span class="number">2.</span>es6</span><br><span class="line"><span class="built_in">Object</span>.assign()方法(深复制只有一层，之后为浅复制（除非再次使用<span class="built_in">Object</span>.assign嵌套方式赋值）)</span><br><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    a: <span class="number">1</span>,</span><br><span class="line">    arr: [<span class="number">1</span>, <span class="number">2</span>]</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">let</span> obj1 = <span class="built_in">Object</span>.assign(&#123;&#125;, obj);</span><br><span class="line">obj1.a = <span class="number">2</span></span><br><span class="line"><span class="comment">//不变</span></span><br><span class="line"><span class="built_in">console</span>.log(obj) <span class="comment">// &#123; a:1, arr: [1,2] &#125;;</span></span><br><span class="line"><span class="number">3.</span>immutable</span><br><span class="line"><span class="number">4.</span>arr1=arr.slice(<span class="number">0</span>) slice() 返回新数组</span><br><span class="line"><span class="number">5.</span>arr1=arr.concat()</span><br><span class="line"><span class="keyword">var</span> deepCopy= <span class="function"><span class="keyword">function</span>(<span class="params">source</span>) </span>&#123; </span><br><span class="line">    <span class="keyword">var</span> result=&#123;&#125;;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> key <span class="keyword">in</span> source) &#123;</span><br><span class="line">        result[key] = <span class="keyword">typeof</span> source[key]===<span class="string">'object'</span>? deepCoypy(source[key]): source[key];</span><br><span class="line">     &#125; </span><br><span class="line">   <span class="keyword">return</span> result; </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="判断一个变量是否是数组"><a href="#判断一个变量是否是数组" class="headerlink" title="判断一个变量是否是数组"></a>判断一个变量是否是数组</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = []; </span><br><span class="line"><span class="comment">// 1.基于instanceof </span></span><br><span class="line">a <span class="keyword">instanceof</span> <span class="built_in">Array</span>; </span><br><span class="line"><span class="comment">// 2.基于constructor </span></span><br><span class="line">a.constructor === <span class="built_in">Array</span>; </span><br><span class="line"><span class="comment">// 3.基于Object.prototype.isPrototypeOf </span></span><br><span class="line"><span class="built_in">Array</span>.prototype.isPrototypeOf(a); </span><br><span class="line"><span class="comment">// 4.基于getPrototypeOf </span></span><br><span class="line"><span class="built_in">Object</span>.getPrototypeOf(a) === <span class="built_in">Array</span>.prototype; </span><br><span class="line"><span class="comment">// 5.基于Object.prototype.toString </span></span><br><span class="line"><span class="built_in">Object</span>.prototype.toString.apply(a) === <span class="string">'[object Array]'</span>;</span><br><span class="line"><span class="comment">// 6.Array.isArray</span></span><br><span class="line"><span class="built_in">Array</span>.isArray(a); <span class="comment">// true</span></span><br></pre></td></tr></table></figure>
<p>以上，除了Object.prototype.toString外，其它方法都不能正确判断变量的类型。虽然Array继承自Object，也会有 toString方法，但是这个方法有可能会被改写而达不到我们的要求，而Object.prototype则是老虎的屁股，很少有人敢去碰它的，所以能一定程度保证其“纯洁性”：)😝</p>
<ul>
<li>由于每个iframe都有一套自己的执行环境，跨iframe实例化的对象彼此是不共享原型链的，因此导致检测代码失效。</li>
</ul>
<p>举个🌰
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> iframe = <span class="built_in">document</span>.createElement(<span class="string">'iframe'</span>); <span class="comment">//创建iframe</span></span><br><span class="line"><span class="built_in">document</span>.body.appendChild(iframe); <span class="comment">//添加到body中</span></span><br><span class="line">xArray = <span class="built_in">window</span>.frames[<span class="built_in">window</span>.frames.length<span class="number">-1</span>].Array;</span><br><span class="line"><span class="keyword">var</span> arr = <span class="keyword">new</span> xArray(<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>); <span class="comment">// 声明数组[1,2,3]</span></span><br><span class="line">alert(arr <span class="keyword">instanceof</span> <span class="built_in">Array</span>); <span class="comment">// false</span></span><br><span class="line">alert(arr.constructor === <span class="built_in">Array</span>); <span class="comment">// false</span></span><br></pre></td></tr></table></figure></p>
<ul>
<li>最佳写法<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">1</span>];</span><br><span class="line"><span class="keyword">var</span> arr2 = [&#123; <span class="attr">abac</span> : <span class="number">1</span>, <span class="attr">abc</span> : <span class="number">2</span> &#125;];</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">isArrayFn</span>(<span class="params">value</span>)</span>&#123;</span><br><span class="line"><span class="keyword">if</span> (<span class="keyword">typeof</span> <span class="built_in">Array</span>.isArray === <span class="string">"function"</span>) &#123;</span><br><span class="line"><span class="keyword">return</span> <span class="built_in">Array</span>.isArray(value);</span><br><span class="line">&#125;<span class="keyword">else</span>&#123;</span><br><span class="line"><span class="keyword">return</span> <span class="built_in">Object</span>.prototype.toString.call(value) === <span class="string">"[object Array]"</span>;</span><br><span class="line">&#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(isArrayFn(arr));<span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(isArrayFn(arr2));<span class="comment">// true</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
<h2 id="优化"><a href="#优化" class="headerlink" title="优化"></a>优化</h2><ul>
<li>按需加载（当用户触发了动作时才加载对应的功能）路由</li>
<li>业务代码拆分</li>
<li><p>第三方库提取vendor</p>
</li>
<li><p>降低请求量：压缩文件图片，合并文件 减少http请求、minify/gzip压缩，webP，lazyload</p>
</li>
<li>网络图、字体图标(雪碧图)</li>
<li>缓存：HTTP协议缓存请求，离线缓存manifest</li>
<li>加快请求速度：预解析DNS，减少域名数，并行加载，上cdn分发</li>
<li>渲染：js、css优化，加载顺序，服务端渲染，pipeline</li>
</ul>
<h2 id="行内、块级、空元素"><a href="#行内、块级、空元素" class="headerlink" title="行内、块级、空元素"></a>行内、块级、空元素</h2><ul>
<li>行内元素：a、b、span、img、input、strong、select、label、em、button、textarea</li>
<li>块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote</li>
<li>常见空元素：即没有内容的HTML元素，例如：br、meta、hr、link、input、img</li>
<li>不常见空元素：area、base、col、command、embed、keygen、param、source、track、wbr</li>
</ul>
<h2 id="px、em、rem的区别"><a href="#px、em、rem的区别" class="headerlink" title="px、em、rem的区别"></a>px、em、rem的区别</h2><p>px和em都是长度单位,px的只是固定的,em的值是相对的继承父类元素的字体大小。浏览器的默认字体高位16px。1em=16px;
rem单位基于html根元素的字体大小。</p>
<ul>
<li>vw/vh(css3) vmin(vw和vh的较小值)/vmax(vw和vh的较大值)和百分比的区别</li>
</ul>
<table>
<thead>
<tr>
<th style="text-align:left">单位</th>
<th style="text-align:left">含义</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">%</td>
<td style="text-align:left">大部分相对于祖先元素，也有相对于自身的情况比如（border-radius、translate等)</td>
</tr>
<tr>
<td style="text-align:left">vm/vh</td>
<td style="text-align:left">相对于视窗的尺寸</td>
</tr>
</tbody>
</table>
<h2 id="路由权限管理"><a href="#路由权限管理" class="headerlink" title="路由权限管理"></a>路由权限管理</h2><ul>
<li>route render方法里进行判断 redirect or return null</li>
<li>组件内部判断</li>
<li>高阶组件</li>
<li>dva监听url subscription</li>
</ul>
<h2 id="node中的事件循环是什么样子的"><a href="#node中的事件循环是什么样子的" class="headerlink" title="node中的事件循环是什么样子的?"></a>node中的事件循环是什么样子的?</h2><ul>
<li>event loop其实就是一个事件队列，先加入先执行，执行完一次队列，再次循环遍历看有没有新事件加入队列．执行中的叫IO events, setImmediate是在当前队列立即执行,setTimout/setInterval是把执行定时到下一个队列，process.nextTick是在当前执行完，下次遍历前执行．所以总体顺序是: IO events &gt;&gt; setImmediate &gt;&gt; setTimeout/setInterval &gt;&gt; process.nextTick</li>
</ul>
<h2 id="清空数组"><a href="#清空数组" class="headerlink" title="清空数组"></a>清空数组</h2><ul>
<li>直接赋值空数组</li>
<li>splice(0,数组length)清空</li>
<li>设置数组length=0</li>
</ul>
<h2 id="判断数组中出现次数最多的元素"><a href="#判断数组中出现次数最多的元素" class="headerlink" title="判断数组中出现次数最多的元素"></a>判断数组中出现次数最多的元素</h2><ol>
<li>临时对象数组，原数组sort排序，判断前后位是否相等。临时对象数组排序</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params">arr</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> temp=[];<span class="comment">//对象数组</span></span><br><span class="line">    <span class="keyword">var</span> i;</span><br><span class="line">    temp[<span class="number">0</span>]=&#123;<span class="attr">value</span>:arr[<span class="number">0</span>],<span class="attr">index</span>:<span class="number">1</span>&#125;;<span class="comment">//保存数组元素出现的次数和值</span></span><br><span class="line">    arr.sort();</span><br><span class="line">    <span class="keyword">for</span>(i=<span class="number">1</span>;i&lt;arr.length;i++)&#123;</span><br><span class="line">        <span class="keyword">if</span>(arr[i]==arr[i<span class="number">-1</span>])&#123;</span><br><span class="line">            temp[temp.length<span class="number">-1</span>].index++;</span><br><span class="line">        &#125;<span class="keyword">else</span>&#123;<span class="comment">//不相同则新增一个对象元素</span></span><br><span class="line">            temp.push(&#123;<span class="attr">index</span>:<span class="number">1</span>,<span class="attr">value</span>:arr[i]&#125;);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    temp.sort(<span class="function"><span class="keyword">function</span>(<span class="params">a,b</span>)</span>&#123;<span class="comment">//按照出现次数从大到小排列</span></span><br><span class="line">        <span class="keyword">return</span> b.index-a.index;</span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">var</span> max=temp[<span class="number">0</span>].index;</span><br><span class="line">    <span class="keyword">var</span> maxV=temp[<span class="number">0</span>].value;</span><br><span class="line">    <span class="keyword">var</span> second=temp[<span class="number">1</span>].index;</span><br><span class="line">    <span class="keyword">var</span> secondV=temp[<span class="number">1</span>].value;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> &#123;max,maxV,second,secondV&#125;;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> arr=[<span class="number">2</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">100</span>,<span class="number">100</span>,,<span class="number">3</span>,<span class="number">1</span>,<span class="number">4</span>,<span class="number">4</span>,<span class="number">100</span>,<span class="number">100</span>];</span><br><span class="line"><span class="keyword">var</span> &#123;max,maxV,second,secondV&#125;=f(arr);</span><br><span class="line"><span class="built_in">console</span>.log(max,maxV,second,secondV); <span class="comment">// 4 100 3 4</span></span><br></pre></td></tr></table></figure>
<ol>
<li><p>临时对象 判断属性名存不存在 2次遍历</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>,<span class="number">1</span>,<span class="number">2</span>,<span class="number">2</span>,<span class="number">2</span>,<span class="number">2</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">3</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">4</span>];</span><br><span class="line">    <span class="keyword">var</span> obj = &#123;&#125;;</span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>; i&lt;arr.length; i++)&#123;</span><br><span class="line">        <span class="keyword">if</span>(!obj[arr[i]])&#123;</span><br><span class="line">            obj[arr[i]] = <span class="number">1</span>;</span><br><span class="line">        &#125;<span class="keyword">else</span> &#123;</span><br><span class="line">            obj[arr[i]]++;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">/*</span></span><br><span class="line"><span class="comment">        此时的obj对象包含了所有元素出现次数的信息</span></span><br><span class="line"><span class="comment">        然后再遍历obj对象就可以查询出出现次数最多/最少的元素了</span></span><br><span class="line"><span class="comment">    */</span></span><br><span class="line">    <span class="keyword">var</span> maxNum = <span class="number">0</span>;</span><br><span class="line">    <span class="keyword">var</span> minNum = obj[arr[<span class="number">0</span>]];  <span class="comment">//先随意给最少的变量赋值（但保证是数组中的元素出现的次数）</span></span><br><span class="line">    <span class="keyword">var</span> maxEleArr = [],minEleArr = [];</span><br><span class="line">    <span class="comment">//第一次遍历找出出现次数最多和最少的值</span></span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">var</span> key <span class="keyword">in</span> obj)&#123;</span><br><span class="line">        <span class="keyword">if</span>(obj[key] &gt; maxNum)&#123;</span><br><span class="line">            maxNum = obj[key];</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">if</span>(obj[key] &lt; maxNum)&#123;</span><br><span class="line">            minNum = obj[key];</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//第二次遍历找出所有出现次数最多和最少的元素</span></span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">var</span> key <span class="keyword">in</span> obj)&#123;</span><br><span class="line">        <span class="keyword">if</span>(obj[key] == maxNum)&#123;</span><br><span class="line">            maxEleArr.push(key);</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">if</span>(obj[key] == minNum)&#123;</span><br><span class="line">            minEleArr.push(key);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="built_in">console</span>.log(maxEleArr + <span class="string">":"</span> + maxNum );  <span class="comment">// 2:5</span></span><br><span class="line">    <span class="built_in">console</span>.log(minEleArr + <span class="string">":"</span> + minNum );  <span class="comment">// 1,4:2</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>reduce简写</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = <span class="string">'abcdaabc'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> info = arr</span><br><span class="line">    .split(<span class="string">''</span>)</span><br><span class="line">    .reduce(<span class="function">(<span class="params">p, k</span>) =&gt;</span> (p[k]++ || (p[k] = <span class="number">1</span>), p), &#123;&#125;);</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(info); <span class="comment">//&#123; a: 3, b: 2, c: 2, d: 1 &#125;</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>临时对象简写</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> map = &#123;&#125;</span><br><span class="line"><span class="keyword">const</span> str = <span class="string">'hello world'</span></span><br><span class="line"></span><br><span class="line">str.split(<span class="string">''</span>).forEach(<span class="function"><span class="params">key</span> =&gt;</span> &#123;</span><br><span class="line">  map[key] = -~map[key]</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(map)</span><br><span class="line"><span class="comment">// &#123;" ": 1, d: 1, e: 1, h: 1, l: 3, o: 2, r: 1, w: 1&#125;</span></span><br><span class="line"><span class="comment">// ~i = -(i + 1)，~undefined = -1</span></span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="清除浮动"><a href="#清除浮动" class="headerlink" title="清除浮动"></a>清除浮动</h2><p>清除浮动是为了清除浮动元素产生的影响。浮动元素的高度会发生坍塌，使页面后面的布局不能正常显示。
设置成浮动后，display值会自动变成block。</p>
<blockquote>
<p>浮动会引起高度塌陷和文字环绕。</p>
<ol>
<li>使用空标签清除浮动clear: both （增加了无意义的标签）</li>
<li>使用overflow: auto/hidden （使用zoom: 1兼容IE）
zoom:1的清除浮动原理?
清除浮动，触发hasLayout；
Zoom属性是IE浏览器的专有属性，它可以设置或检索对象的缩放比例。解决ie下比较奇葩的bug。
譬如外边距（margin）的重叠，浮动清除，触发ie的haslayout属性等。</li>
</ol>
</blockquote>
<p>来龙去脉大概如下：
当设置了zoom的值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。</p>
<ol>
<li>给浮动元素的容器也添加浮动</li>
<li>给浮动元素后面的元素添加clear属性</li>
<li>使用after伪元素清除浮动（用于非IE浏览器）</li>
</ol>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.clear</span> &#123;</span><br><span class="line">    <span class="attribute">overflow</span>: auto;</span><br><span class="line">    <span class="attribute">zoom</span>: <span class="number">1</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.clear</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: block;</span><br><span class="line">    <span class="attribute">content</span>: <span class="string">'清除浮动'</span>,</span><br><span class="line">    height: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">clear</span>: both;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.clearfix</span><span class="selector-pseudo">::before</span>, <span class="selector-class">.clearfix</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">    <span class="attribute">content</span>: <span class="string">" "</span>;</span><br><span class="line">    <span class="attribute">display</span>: table;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>发现：除了clear：both用来闭合浮动的，其他代码无非都是为了隐藏掉content生成的内容，这也就是其他版本的闭合浮动为什么会有font-size：0，line-height：0。</p>
<h2 id="margin-top和padding-left根据height还是width？"><a href="#margin-top和padding-left根据height还是width？" class="headerlink" title="margin-top和padding-left根据height还是width？"></a>margin-top和padding-left根据height还是width？</h2><p>width</p>
<h2 id="vue的非父子组件传递"><a href="#vue的非父子组件传递" class="headerlink" title="vue的非父子组件传递"></a>vue的非父子组件传递</h2><ol>
<li>vuex 2. 在同一个vue实例上调用$emit和$on</li>
</ol>
<h2 id="原生js实现拖拽"><a href="#原生js实现拖拽" class="headerlink" title="原生js实现拖拽"></a>原生js实现拖拽</h2><p><a href="https://cosyer.github.io/jelly/drag/" target="_blank" rel="noopener">拖拽</a></p>
<h2 id="实现函数监听函数发布订阅模式-on-emit-off-方法-类似-iflux"><a href="#实现函数监听函数发布订阅模式-on-emit-off-方法-类似-iflux" class="headerlink" title="实现函数监听函数发布订阅模式 on emit off 方法 类似 iflux"></a>实现函数监听函数发布订阅模式 on emit off 方法 类似 iflux</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">event</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">this</span>.elem = <span class="built_in">document</span>.createElement(<span class="string">'div'</span>)</span><br><span class="line">&#125;</span><br><span class="line">event.prototype.on = <span class="function"><span class="keyword">function</span> (<span class="params">name, fn</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">this</span>.e = <span class="keyword">new</span> Event(name)</span><br><span class="line">  <span class="keyword">this</span>.elem.addEventListener(name, fn.call(<span class="keyword">this</span>, <span class="keyword">this</span>.e, <span class="keyword">this</span>.e.type))</span><br><span class="line">&#125;</span><br><span class="line">event.prototype.emit = <span class="function"><span class="keyword">function</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">this</span>.elem.dispatchEvent(<span class="keyword">this</span>.e) <span class="comment">// 这里接受的参数必须是Event类型的，不然报错</span></span><br><span class="line">&#125;</span><br><span class="line">event.prototype.off = <span class="function"><span class="keyword">function</span> (<span class="params">name, fn</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">this</span>.e = <span class="literal">null</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> ee = <span class="keyword">new</span> event()</span><br><span class="line">ee.on(<span class="string">'foo'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;<span class="built_in">console</span>.log(<span class="number">110</span>)&#125;)</span><br><span class="line">ee.emit(<span class="string">'foo'</span>) <span class="comment">// 110</span></span><br></pre></td></tr></table></figure>
<h2 id="左边固定，右边自适应布局"><a href="#左边固定，右边自适应布局" class="headerlink" title="左边固定，右边自适应布局"></a>左边固定，右边自适应布局</h2><ol>
<li>float</li>
<li>flex布局</li>
<li>通过position 父级relative</li>
</ol>
<h2 id="mysql-字符转换"><a href="#mysql-字符转换" class="headerlink" title="mysql 字符转换"></a>mysql 字符转换</h2><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">-- date转字符串</span></span><br><span class="line"><span class="keyword">select</span> <span class="keyword">date_format</span>(<span class="keyword">now</span>(), <span class="string">'%Y-%m-%d'</span>); </span><br><span class="line"><span class="comment">--  date转时间戳</span></span><br><span class="line"><span class="keyword">select</span> <span class="keyword">unix_timestamp</span>(<span class="keyword">now</span>())</span><br><span class="line"><span class="comment">--  字符串转时间</span></span><br><span class="line"><span class="keyword">select</span> <span class="keyword">str_to_date</span>(<span class="string">"2019-01-15"</span>,<span class="string">'%Y-%m-%d %H'</span>)</span><br><span class="line"><span class="comment">-- 20190115</span></span><br><span class="line"><span class="comment">-- 时间戳转时间</span></span><br><span class="line"><span class="keyword">select</span> from_unixtime(<span class="number">1451997924</span>)</span><br><span class="line"><span class="comment">-- 时间戳转字符串</span></span><br><span class="line"><span class="keyword">select</span> from_unixtime(<span class="number">1451997924</span>,<span class="string">"%Y-%m-%d %H"</span>)</span><br></pre></td></tr></table></figure>
<h2 id="empty-和html-“”"><a href="#empty-和html-“”" class="headerlink" title="empty()和html(“”)"></a>empty()和html(“”)</h2><p>推荐使用empty html不会清除子组件的事件</p>
<h2 id="react、vue多个class"><a href="#react、vue多个class" class="headerlink" title="react、vue多个class"></a>react、vue多个class</h2><h3 id="react"><a href="#react" class="headerlink" title="react"></a>react</h3><p>方法一：ES6 模板字符串 <code></code></p>
<p>className={title ${index === this.state.active ? ‘active’ : ‘’}}
　　</p>
<p>方法二：join(“”)</p>
<p>className={[“title”, index === this.state.active?”active”:null].join(‘ ‘)}</p>
<p>方法三：classnames</p>
<h3 id="vue"><a href="#vue" class="headerlink" title="vue"></a>vue</h3><p>方法一：
:class=”[box,shadow]”
方法二：
:class=”{box:show1,shadow:show2}”</p>
<h2 id="vue组件通信"><a href="#vue组件通信" class="headerlink" title="vue组件通信"></a>vue组件通信</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br></pre></td><td class="code"><pre><span class="line">// 父传子</span><br><span class="line">// 父组件</span><br><span class="line">&lt;note-address :data=&quot;msg&quot;&gt;&lt;/note-address&gt; </span><br><span class="line"></span><br><span class="line">// 子组件</span><br><span class="line"></span><br><span class="line">&lt;div&gt;&#123;&#123; data.partment &#125;&#125;&lt;/div&gt;</span><br><span class="line"></span><br><span class="line">export default &#123;</span><br><span class="line">  //props:[&apos;data&apos;]</span><br><span class="line">  props: &#123;</span><br><span class="line">    data: Object</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">// 子传父</span><br><span class="line">// 父组件</span><br><span class="line">&lt;note-address @new=&quot;addNote&quot;&gt;&lt;/note-address&gt; </span><br><span class="line"></span><br><span class="line">// 子组件</span><br><span class="line">&lt;button type=&quot;small&quot; class=&quot;confirm&quot; @click=&quot;add&quot;&gt;设为教案&lt;/button&gt;</span><br><span class="line"></span><br><span class="line">methods: &#123;</span><br><span class="line"> add () &#123;</span><br><span class="line">  this.$emit(&apos;new&apos;, false)</span><br><span class="line"> &#125;</span><br><span class="line">&#125;</span><br><span class="line">// 兄弟相传</span><br><span class="line">// 1.创建 公共bus.js</span><br><span class="line"></span><br><span class="line">//bus.js</span><br><span class="line">import Vue from &apos;vue&apos;</span><br><span class="line">export default new Vue()</span><br><span class="line"></span><br><span class="line">// 2.父组件注册两个子组件</span><br><span class="line">components:&#123;</span><br><span class="line">    firstChild,</span><br><span class="line">    secondChild</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">// 3.firstChild组件</span><br><span class="line"></span><br><span class="line">&lt;input type=&quot;button&quot; value=&quot;点击触发&quot; @click=&quot;elementByValue&quot;&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">// 引入公共的bus，来做为中间传达的工具</span><br><span class="line">  import Bus from &apos;./bus.js&apos;</span><br><span class="line">  export default &#123;</span><br><span class="line">      methods: &#123;</span><br><span class="line">      elementByValue: function () &#123;</span><br><span class="line">        Bus.$emit(&apos;val&apos;, &apos;兄弟，收到了吗？&apos;)</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br><span class="line">// 4.secondChild组件</span><br><span class="line"></span><br><span class="line">&lt;span&gt;&#123;&#123;msg&#125;&#125;&lt;/span&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">  import Bus from &apos;./bus.js&apos;</span><br><span class="line">  export default &#123;</span><br><span class="line">      mounted()&#123;</span><br><span class="line">            let self = this;</span><br><span class="line">            Bus.$on(&apos;val&apos;, function (msg) &#123;</span><br><span class="line">                console.log(msg)</span><br><span class="line">                self.msg = msg</span><br><span class="line">            &#125;)</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h2 id="网络七层协议"><a href="#网络七层协议" class="headerlink" title="网络七层协议"></a>网络七层协议</h2><p><img src="http://cdn.mydearest.cn/blog/images/tcp.png" alt="tcp"></p>
<ul>
<li>应用层</li>
<li>会话层</li>
<li>传输层</li>
<li>网络层</li>
<li>数据链路层</li>
<li>物理层</li>
<li><p>表示层</p>
</li>
<li><p>应用层（HTTP，FTP，NFS，SMTP）
与其它计算机进行通讯的一个应用，它是对应应用程序的通信服务的。例如，一个没有通信功能的字处理程序就不能执行通信的代码，从事字处理工作的程序员也不关心OSI的第7层。但是，如果添加了一个传输文件的选项，那么字处理器的程序员就需要实现OSI的第7层。示例：TELNET，HTTP，FTP，NFS，SMTP等。</p>
</li>
<li><p>表示层
这一层的主要功能是定义数据格式及加密。例如，FTP允许你选择以二进制或ASCII格式传输。如果选择二进制，那么发送方和接收方不改变文件的内容。如果选择ASCII格式，发送方将把文本从发送方的字符集转换成标准的ASCII后发送数据。在接收方将标准的ASCII转换成接收方计算机的字符集。示例：加密，ASCII等。</p>
</li>
<li><p>传输层（TCP，UDP，SPX）
这层的功能包括是否选择差错恢复协议还是无差错恢复协议，及在同一主机上对不同应用的数据流的输入进行复用，还包括对收到的顺序不对的数据包的重新排序功能。示例：TCP，UDP，SPX。</p>
</li>
<li><p>会话层（RPC，SQL）
它定义了如何开始、控制和结束一个会话，包括对多个双向消息的控制和管理，以便在只完成连续消息的一部分时可以通知应用，从而使表示层看到的数据是连续的，在某些情况下，如果表示层收到了所有的数据，则用数据代表表示层。示例：RPC，SQL等</p>
</li>
<li><p>网络层（IP，IPX）
这层对端到端的包传输进行定义，它定义了能够标识所有结点的逻辑地址，还定义了路由实现的方式和学习的方式。为了适应最大传输单元长度小于包长度的传输介质，网络层还定义了如何将一个包分解成更小的包的分段方法。示例：IP，IPX等。</p>
</li>
<li><p>数据链路层（IP，IPX）
它定义了在单个链路上如何传输数据。这些协议与被讨论的各种介质有关。示例：ATM，FDDI等。</p>
</li>
<li><p>物理层（Rj45，802.3）
OSI的物理层规范是有关传输介质的特这些规范通常也参考了其他组织制定的标准。连接头、帧、帧的使用、电流、编码及光调制等都属于各种物理层规范中的内容。物理层常用多个规范完成对所有细节的定义。示例：Rj45，802.3等。</p>
</li>
</ul>
<h2 id="call使用"><a href="#call使用" class="headerlink" title="call使用"></a>call使用</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">add</span>(<span class="params">a,b</span>)</span>&#123;</span><br><span class="line"><span class="built_in">console</span>.log(a+b)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sub</span>(<span class="params">a,b</span>)</span>&#123;</span><br><span class="line"><span class="built_in">console</span>.log(a-b)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">add.call(sub,<span class="number">3</span>,<span class="number">1</span>) <span class="comment">// 4</span></span><br></pre></td></tr></table></figure>
<h2 id="css选择器的优先级"><a href="#css选择器的优先级" class="headerlink" title="css选择器的优先级"></a>css选择器的优先级</h2><p>选择器：id选择器，class选择器，标签选择器，伪元素选择器，伪类选择器等等</p>
<p>同一元素引用多个样式时，排在后面的样式属性的优先级高</p>
<p>样式选择器的类型不同时。优先级顺序为：id&gt;class&gt;标签</p>
<p>标签之间存在层级包含关系时，后代元素会继承祖先元素的样式，如果后代元素定义了与祖先元素相同的样式，则祖先元素的相同的样式会被覆盖。继承的样式优先级较低，至少比标签选择器低。</p>
<p>带有！important标记的样式属性优先级最高</p>
<p>样式表来源不同时优先级顺序为：内联&gt;内部&gt;外部&gt;浏览器用户自定义的样式&gt;浏览器默认样式</p>
<h2 id="事件队列（eventLoop）"><a href="#事件队列（eventLoop）" class="headerlink" title="事件队列（eventLoop）"></a>事件队列（eventLoop）</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 以下是头条的类似题目，这个考得更全面</span></span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">a1</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'a1 start'</span>)</span><br><span class="line">    <span class="keyword">await</span> a2()</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'a1 end'</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">a2</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'a2'</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'script start'</span>)</span><br><span class="line">setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'setTimeout'</span>)</span><br><span class="line">&#125;, <span class="number">0</span>)</span><br><span class="line"><span class="built_in">Promise</span>.resolve().then(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'promise1'</span>)</span><br><span class="line">&#125;)</span><br><span class="line">a1()</span><br><span class="line"><span class="keyword">let</span> promise2 = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve</span>) =&gt;</span> &#123;</span><br><span class="line">    resolve(<span class="string">'promise2.then'</span>)</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'promise2'</span>)</span><br><span class="line">&#125;)</span><br><span class="line">promise2.then(<span class="function">(<span class="params">res</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(res)</span><br><span class="line">    <span class="built_in">Promise</span>.resolve().then(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">'promise3'</span>)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'script end'</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// script start</span></span><br><span class="line"><span class="comment">// a1 start</span></span><br><span class="line"><span class="comment">// a2</span></span><br><span class="line"><span class="comment">// promise2</span></span><br><span class="line"><span class="comment">// script end</span></span><br><span class="line"><span class="comment">// promise1</span></span><br><span class="line"><span class="comment">// a1 end</span></span><br><span class="line"><span class="comment">// promise2.then</span></span><br><span class="line"><span class="comment">// promise3</span></span><br><span class="line"><span class="comment">// setTimeout</span></span><br></pre></td></tr></table></figure>
<h2 id="vue中watch和computed的区别"><a href="#vue中watch和computed的区别" class="headerlink" title="vue中watch和computed的区别"></a>vue中watch和computed的区别</h2><ul>
<li><p>computed，计算属性，随着依赖的数据响应式地改变，用于复杂逻辑处理</p>
</li>
<li><p>watch，命令式地监听数据变化进行操作</p>
</li>
</ul>
<h2 id="简单介绍es6"><a href="#简单介绍es6" class="headerlink" title="简单介绍es6"></a>简单介绍es6</h2><p>ES6在变量的声明和定义方面增加了let、const声明变量，有局部变量的概念，赋值中有比较吸引人的结构赋值，同时ES6对字符串、 数组、正则、对象、函数等拓展了一些方法，如字符串方面的模板字符串、函数方面的默认参数、对象方面属性的简洁表达方式，ES6也 引入了新的数据类型symbol，新的数据结构set和map,symbol可以通过typeof检测出来，为解决异步回调问题，引入了promise和 generator，还有最为吸引人了实现Class和模块，通过Class可以更好的面向对象编程，使用模块加载方便模块化编程，当然考虑到 浏览器兼容性，我们在实际开发中需要使用babel进行编译。</p>
<h2 id="js模块化"><a href="#js模块化" class="headerlink" title="js模块化"></a>js模块化</h2><p>在ES6出现之前，js没有标准的模块化概念，这也就造成了js多人写作开发容易造成全局污染的情况，以前我们可能会采用立即执行 函数、对象等方式来尽量减少变量这种情况，后面社区为了解决这个问题陆续提出了AMD规范和CMD规范，这里不同于Node.js的 CommonJS的原因在于服务端所有的模块都是存在于硬盘中的，加载和读取几乎是不需要时间的，而浏览器端因为加载速度取决于网速， 因此需要采用异步加载，AMD规范中使用define来定义一个模块，使用require方法来加载一个模块，现在ES6也推出了标准的模块 加载方案，通过export和import来导出和导入模块。</p>
<h2 id="图片加载成功或者失败"><a href="#图片加载成功或者失败" class="headerlink" title="图片加载成功或者失败"></a>图片加载成功或者失败</h2><p>onload/onerror</p>
<h2 id="递归和迭代的区别"><a href="#递归和迭代的区别" class="headerlink" title="递归和迭代的区别"></a>递归和迭代的区别</h2><p>程序调用自身称为递归，利用变量的原值推出新值称为迭代，递归的优点 大问题转化为小问题，可以减少代码量，同时应为代码精简，可读性好， 缺点就是，递归调用浪费了空间，而且递归太深容易造成堆栈的溢出。迭代的好处 就是代码运行效率好，因为时间只因循环次数增加而增加，而且没有额外的空间开销， 缺点就是代码不如递归简洁</p>
<h2 id="原生JS操作DOM的方法有哪些？"><a href="#原生JS操作DOM的方法有哪些？" class="headerlink" title="原生JS操作DOM的方法有哪些？"></a>原生JS操作DOM的方法有哪些？</h2><p>获取节点的方法getElementById、getElementsByClassName、getElementsByTagName、 getElementsByName、querySelector、querySelectorAll,对元素属性进行操作的 getAttribute、 setAttribute、removeAttribute方法，对节点进行增删改的appendChild、insertBefore、replaceChild、removeChild、 createElement等</p>
<h2 id="setTimeout和setInterval的区别，包含内存方面的分析？"><a href="#setTimeout和setInterval的区别，包含内存方面的分析？" class="headerlink" title="setTimeout和setInterval的区别，包含内存方面的分析？"></a>setTimeout和setInterval的区别，包含内存方面的分析？</h2><p>setTimeout表示间隔一段时间之后执行一次调用，而setInterval则是每间隔一段时间循环调用，直至clearInterval结束。 内存方面，setTimeout只需要进入一次队列，不会造成内存溢出，setInterval因为不计算代码执行时间，有可能同时执行多次代码， 导致内存溢出。</p>
<h2 id="addEventListener有哪些参数？"><a href="#addEventListener有哪些参数？" class="headerlink" title="addEventListener有哪些参数？"></a>addEventListener有哪些参数？</h2><p>有三个参数，第一个是事件的类型，第二个是事件的回调函数，第三个是一个表示事件是冒泡阶段还是捕获阶段捕获的布尔值，true表示捕获，false表示冒泡</p>
<h2 id="将静态资源放在其他域名的目的是什么？"><a href="#将静态资源放在其他域名的目的是什么？" class="headerlink" title="将静态资源放在其他域名的目的是什么？"></a>将静态资源放在其他域名的目的是什么？</h2><p>这样做的主要目的是在请求这些静态资源的时候不会发送cookie，节省了流量，需要注意的是cookie是会发送给子域名的（二级域名），所以这些静态资源是不会放在子域名下的， 而是单独放在一个单独的主域名下。同时还有一个原因就是浏览器对于一个域名会有请求数的限制，这种方法可以方便做CDN。</p>
<h2 id="http状态码301和302的区别"><a href="#http状态码301和302的区别" class="headerlink" title="http状态码301和302的区别"></a>http状态码301和302的区别</h2><ul>
<li>301 redirect: 301 代表永久性转移(Permanently Moved) </li>
</ul>
<p>如何避免301跳转https(在response中header)</p>
<ul>
<li>302 redirect: 302 代表暂时性转移(Temporarily Moved)</li>
</ul>
<p>详细来说，301和302状态码都表示重定向，就是说浏览器在拿到服务器返回的这个状态码后会自动跳转到一个新的URL地址，这个地址可以从响应的Location首部中获取（用户看到的效果就是他输入的地址A瞬间变成了另一个地址B）——这是它们的共同点。他们的不同在于。301表示旧地址A的资源已经被永久地移除了（这个资源不可访问了），搜索引擎在抓取新内容的同时也将旧的网址交换为重定向之后的网址；302表示旧地址A的资源还在（仍然可以访问），这个重定向只是临时地从旧地址A跳转到地址B，搜索引擎会抓取新的内容而保存旧的网址。</p>
<p><a href="http://cdn.mydearest.cn/blog/images/redirectCache.png" target="_blank" rel="noopener">重定向</a></p>
<h2 id="在什么情况下a-a-1"><a href="#在什么情况下a-a-1" class="headerlink" title="在什么情况下a === a-1 ?"></a>在什么情况下a === a-1 ?</h2><ul>
<li>Infinity/-Infinity</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = <span class="literal">Infinity</span>;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(a === a - <span class="number">1</span>); <span class="comment">// true</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> b = -<span class="literal">Infinity</span>;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(b === b - <span class="number">1</span>);  <span class="comment">// true</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">Infinity</span> + <span class="literal">Infinity</span>); <span class="comment">// Infinity</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">Infinity</span> - <span class="literal">Infinity</span>); <span class="comment">// NaN</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">Infinity</span> * <span class="literal">Infinity</span>); <span class="comment">// Infinity</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">Infinity</span> / <span class="literal">Infinity</span>); <span class="comment">// NaN</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">Infinity</span> * <span class="number">0</span>); <span class="comment">// NaN</span></span><br></pre></td></tr></table></figure>
<ul>
<li>安全数(-2 <strong> 53 + 1到2 </strong> 53 - 1) 即Number.MAX_SAFE_INTEGER和Number.MIN_SAFE_INTEGER 处理特殊情况</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = <span class="built_in">Number</span>.MIN_SAFE_INTEGER - <span class="number">1</span>;</span><br><span class="line"><span class="built_in">console</span>.log(a === a - <span class="number">1</span>); <span class="comment">// true</span></span><br></pre></td></tr></table></figure>
<ul>
<li>a == a -1</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> x = <span class="number">1</span></span><br><span class="line"><span class="keyword">var</span> a = &#123; x, <span class="attr">valueOf</span>: <span class="function"><span class="params">()</span> =&gt;</span> a.x &#125;</span><br><span class="line"><span class="built_in">Object</span>.defineProperty(a, <span class="string">'x'</span>, &#123; get() &#123; <span class="keyword">return</span> --x &#125; &#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> set = <span class="number">1</span></span><br><span class="line"><span class="built_in">Object</span>.defineProperty(<span class="built_in">window</span>, <span class="string">"a"</span>, &#123;</span><br><span class="line">  get : <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> set++</span><br><span class="line">  &#125;,</span><br><span class="line">  enumerable : <span class="literal">true</span>,</span><br><span class="line">  configurable : <span class="literal">true</span></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> a = &#123;</span><br><span class="line"> times: <span class="number">0</span>,</span><br><span class="line"></span><br><span class="line"> valueOf() &#123;</span><br><span class="line">   <span class="keyword">if</span> (<span class="keyword">this</span>.times &amp; <span class="number">1</span>) &#123;</span><br><span class="line">     <span class="keyword">return</span> <span class="number">0</span>;</span><br><span class="line">   &#125;</span><br><span class="line">   <span class="keyword">this</span>.times += <span class="number">1</span>;</span><br><span class="line">   <span class="keyword">return</span> <span class="number">1</span>;</span><br><span class="line"> &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<h2 id="placeholder样式设置"><a href="#placeholder样式设置" class="headerlink" title="placeholder样式设置"></a>placeholder样式设置</h2><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-pseudo">::-webkit-input-placeholder</span>&#123;&#125;    <span class="comment">/* 使用webkit内核的浏览器 */</span></span><br><span class="line"><span class="selector-pseudo">:-moz-placeholder</span>&#123;&#125;                  <span class="comment">/* Firefox版本4-18 */</span></span><br><span class="line"><span class="selector-pseudo">::-moz-placeholder</span>&#123;&#125;                  <span class="comment">/* Firefox版本19+ */</span></span><br><span class="line"><span class="selector-pseudo">:-ms-input-placeholder</span>&#123;&#125;           <span class="comment">/* IE浏览器 */</span></span><br></pre></td></tr></table></figure>
<h2 id="巧用currentColor自定义checkbox样式"><a href="#巧用currentColor自定义checkbox样式" class="headerlink" title="巧用currentColor自定义checkbox样式"></a>巧用currentColor自定义checkbox样式</h2><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 无法自定义checkbox样式 */</span></span><br><span class="line"><span class="selector-tag">input</span><span class="selector-attr">[type=checkbox]</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: red;</span><br><span class="line">  <span class="attribute">color</span>: red;</span><br><span class="line">  <span class="attribute">border</span>: solid red;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">input</span><span class="selector-attr">[type=checkbox]</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">  <span class="attribute">color</span>: inherit;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">input</span><span class="selector-attr">[type=checkbox]</span><span class="selector-pseudo">::before</span>,</span><br><span class="line"><span class="selector-tag">input</span><span class="selector-attr">[type=checkbox]</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">display</span>: inline-block;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">12px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">12px</span>;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">12px</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">3px</span>;</span><br><span class="line">  <span class="attribute">text-align</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">input</span><span class="selector-attr">[type=checkbox]</span><span class="selector-pseudo">:checked</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">  <span class="attribute">content</span>: <span class="string">'x'</span>;</span><br><span class="line">  <span class="attribute">color</span>: white;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">input</span><span class="selector-attr">[type=checkbox]</span><span class="selector-pseudo">::before</span> &#123;</span><br><span class="line">  <span class="attribute">content</span>: <span class="string">' '</span>;</span><br><span class="line">  <span class="comment">/* 表示将背景色设置为当前的文字颜色值。 */</span></span><br><span class="line">  <span class="attribute">background-color</span>: currentColor;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="增补字符不适用String-prototype-charCodeAt和String-fromCharCode"><a href="#增补字符不适用String-prototype-charCodeAt和String-fromCharCode" class="headerlink" title="增补字符不适用String.prototype.charCodeAt和String.fromCharCode"></a>增补字符不适用String.prototype.charCodeAt和String.fromCharCode</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">'🀄'</span>.length <span class="comment">// 2</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> str = <span class="string">'🀄'</span>;</span><br><span class="line"><span class="built_in">console</span>.log(str.codePointAt(<span class="number">0</span>)); <span class="comment">// 126980</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">String</span>.fromCodePoint(<span class="number">126980</span>)); <span class="comment">// 🀄</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log([...<span class="string">"👨‍👩‍👧‍👦"</span>])</span><br><span class="line"><span class="comment">// ["👨", "‍", "👩", "‍", "👦", "‍", "👦"]</span></span><br></pre></td></tr></table></figure>
<h2 id="三次握手、四次挥手"><a href="#三次握手、四次挥手" class="headerlink" title="三次握手、四次挥手"></a>三次握手、四次挥手</h2><ul>
<li>建立连接-TCP的三次握手</li>
</ul>
<p>(1) 主机向服务器发送一个建立连接的请求</p>
<p>(2) 服务器接到请求后发送同意连接的信号</p>
<p>(3) 主机接到同意连接的信号后，再次向服务器发送了确认信号</p>
<p>发送端首先发送一个带SYN标志的数据包给对方。接收端收到后，回传一个带有SYN/ACK标志的数据包以示传达确认信息。最后，发送端再回传一个带ACK标志的数据包，代表“握手”结束。若在握手过程中某个阶段莫名中断，TCP协议会再次以相同的顺序发送相同的数据包。</p>
<ul>
<li>断开连接-TCP的四次挥手
(1) 主机向服务器发送一个断开连接的请求</li>
</ul>
<p>(2) 服务器接到请求后发送确认收到请求的信号；(此时服务器可能还有数据要发送至主机)</p>
<p>(3) 服务器向主机发送断开通知；(此时服务器确认没有要向主机发送的数据)</p>
<p>(4) 主机接到断开通知后断开连接并反馈一个确认信号，服务器收到确认信号后断开连接</p>
<blockquote>
<p>注意：这里的四次挥手中服务器两次向主机发送消息，第一次是回复主机已收到断开的请求，第二次是向主机确认是否断开，确保数据传输完毕。</p>
</blockquote>
<h2 id="幂等性"><a href="#幂等性" class="headerlink" title="幂等性"></a>幂等性</h2><p>其任意多次执行对资源本身所产生的影响均与一次执行的影响相同。</p>
<h2 id="src和href引入的区别"><a href="#src和href引入的区别" class="headerlink" title="src和href引入的区别"></a>src和href引入的区别</h2><p>href 表示超文本引用（hypertext reference），在 link和a 等元素上使用。
src 的内容，是页面必不可少的一部分，是引入。href 的内容，是与该页面有关联，是引用。区别就是，引入和引用。</p>
<h2 id="a-b-c-d-和-a-‘b’-‘c’-‘d’-，哪个性能更高？"><a href="#a-b-c-d-和-a-‘b’-‘c’-‘d’-，哪个性能更高？" class="headerlink" title="a.b.c.d 和 a[‘b’][‘c’][‘d’]，哪个性能更高？"></a>a.b.c.d 和 a[‘b’][‘c’][‘d’]，哪个性能更高？</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">  a:&#123;</span><br><span class="line">      b:&#123;</span><br><span class="line">        c:&#123;</span><br><span class="line">          d:<span class="number">1</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.time()</span><br><span class="line"><span class="built_in">console</span>.log(obj.a.b.c.d)</span><br><span class="line"><span class="built_in">console</span>.timeEnd() </span><br><span class="line"><span class="comment">// console.time()</span></span><br><span class="line"><span class="comment">// console.log(obj["a"]["b"]["c"]["d"])</span></span><br><span class="line"><span class="comment">// console.timeEnd() </span></span><br><span class="line"><span class="comment">// default:1.100ms 0.964ms</span></span><br></pre></td></tr></table></figure>
<h2 id="对象引用"><a href="#对象引用" class="headerlink" title="对象引用"></a>对象引用</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = &#123;<span class="attr">n</span>: <span class="number">1</span>&#125;;</span><br><span class="line"><span class="keyword">var</span> b = a;</span><br><span class="line">a.x = a = &#123;<span class="attr">n</span>: <span class="number">2</span>&#125;;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(a.x) 	</span><br><span class="line"><span class="built_in">console</span>.log(b.x)</span><br><span class="line"><span class="comment">// undefined</span></span><br><span class="line"><span class="comment">// &#123;n:2&#125;</span></span><br></pre></td></tr></table></figure>
<p>首先，a和b同时引用了{n:2}对象，接着执行到a.x = a = {n：2}语句，尽管赋值是从右到左的没错，但是.的优先级比=要高，所以这里首先执行a.x，相当于为a（或者b）所指向的{n:1}对象新增了一个属性x，即此时对象将变为{n:1;x:undefined}。之后按正常情况，从右到左进行赋值，此时执行a ={n:2}的时候，a的引用改变，指向了新对象{n：2},而b依然指向的是旧对象。之后执行a.x = {n：2}的时候，并不会重新解析一遍a，而是沿用最初解析a.x时候的a，也即旧对象，故此时旧对象的x的值为{n：2}，旧对象为 {n:1;x:{n：2}}，它被b引用着。
后面输出a.x的时候，又要解析a了，此时的a是指向新对象的a，而这个新对象是没有x属性的，故访问时输出undefined；而访问b.x的时候，将输出旧对象的x的值，即{n:2}。</p>
<h2 id="Doctype作用？标准模式与兼容模式各有什么区别"><a href="#Doctype作用？标准模式与兼容模式各有什么区别" class="headerlink" title="Doctype作用？标准模式与兼容模式各有什么区别?"></a>Doctype作用？标准模式与兼容模式各有什么区别?</h2><ol>
<li><p>&lt;!DOCTYPE&gt;声明位于HTML文档中的第一行，处于 <html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。</html></p>
</li>
<li><p>标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。</p>
</li>
<li><p>有两种模式： 严格模式：以该浏览器支持的最高标准运行 混杂模式：向后兼容，模拟老浏览器，防止浏览器无法兼容页面。</p>
</li>
</ol>
<h2 id="HTML5-为什么只需要写-lt-DOCTYPE-HTML-gt-？"><a href="#HTML5-为什么只需要写-lt-DOCTYPE-HTML-gt-？" class="headerlink" title="HTML5 为什么只需要写 &lt;!DOCTYPE HTML&gt;？"></a>HTML5 为什么只需要写 &lt;!DOCTYPE HTML&gt;？</h2><ul>
<li><p>HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；</p>
</li>
<li><p>而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。</p>
</li>
<li><p>新增语义化标签</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">header</span>&gt;</span>、<span class="tag">&lt;<span class="name">footer</span>&gt;</span>、<span class="tag">&lt;<span class="name">section</span>&gt;</span>、<span class="tag">&lt;<span class="name">article</span>&gt;</span>、<span class="tag">&lt;<span class="name">nav</span>&gt;</span>、<span class="tag">&lt;<span class="name">hgroup</span>&gt;</span>、<span class="tag">&lt;<span class="name">aside</span>&gt;</span>、<span class="tag">&lt;<span class="name">figure</span>&gt;</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>删除的标签</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">big</span>&gt;</span>、<span class="tag">&lt;<span class="name">u</span>&gt;</span>、<span class="tag">&lt;<span class="name">font</span>&gt;</span>、<span class="tag">&lt;<span class="name">basefont</span>&gt;</span>、<span class="tag">&lt;<span class="name">center</span>&gt;</span>、<span class="tag">&lt;<span class="name">s</span>&gt;</span>、<span class="tag">&lt;<span class="name">tt</span>&gt;</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>多媒体</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">audio</span>&gt;</span>、<span class="tag">&lt;<span class="name">video</span>&gt;</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 只写属性名默认为true --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span>  <span class="attr">checked</span>/&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 属性名="属性名"也为true --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span>  <span class="attr">checked</span>=<span class="string">"checked"</span>/&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="对浏览器内核的理解？"><a href="#对浏览器内核的理解？" class="headerlink" title="对浏览器内核的理解？"></a>对浏览器内核的理解？</h2><p>主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。</p>
<p>JS引擎则：解析和执行javascript来实现网页的动态效果。</p>
<p>最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。</p>
<h2 id="html5新特性？"><a href="#html5新特性？" class="headerlink" title="html5新特性？"></a>html5新特性？</h2><ul>
<li><p>HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
绘画 canvas;
用于媒介回放的 video 和 audio 元素;
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
sessionStorage 的数据在浏览器关闭后自动删除;
语意化更好的内容元素，比如 article、footer、header、nav、section;
表单控件，calendar、date、time、email、url、search;
新的技术webworker, websocket, Geolocation;</p>
</li>
<li><p>移除的元素：
纯表现的元素：basefont，big，center，font, s，strike，tt，u;
对可用性产生负面影响的元素：frame，frameset，noframes；</p>
</li>
<li><p>支持HTML5新标签：
IE8/IE7/IE6支持通过document.createElement方法产生的标签，
可以利用这一特性让这些浏览器支持HTML5新标签，
浏览器支持新标签后，还需要添加标签默认的样式。
当然也可以直接使用成熟的框架、比如html5shim;</p>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;!--[<span class="keyword">if</span> lt IE <span class="number">9</span>]&gt;</span><br><span class="line">&lt;script&gt; src=<span class="string">"http://html5shim.googlecode.com/svn/trunk/html5.js"</span>&lt;<span class="regexp">/script&gt;</span></span><br><span class="line"><span class="regexp">&lt;![endif]--&gt;</span></span><br></pre></td></tr></table></figure>
<ul>
<li>如何区分HTML5： DOCTYPE声明新增的结构元素功能元素
语义化标签：header,footer,nav,aside,section 增强表单：为input增加了color,email,data,range等类型 存储：sessionStorage，localStorage，离线存储 多媒体：audio，vedio canvas 拖放 地理定位 webworker websocket</li>
</ul>
<h2 id="对HTML语义化的理解？"><a href="#对HTML语义化的理解？" class="headerlink" title="对HTML语义化的理解？"></a>对HTML语义化的理解？</h2><p>用正确的标签做正确的事情。
html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。</p>
<h2 id="iframe缺点"><a href="#iframe缺点" class="headerlink" title="iframe缺点"></a>iframe缺点</h2><ul>
<li>iframe会阻塞主页面的Onload事件；</li>
<li>搜索引擎的检索程序无法解读这种页面，不利于SEO;</li>
<li>iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。</li>
</ul>
<p>使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值。</p>
<h2 id="多个标签页通信"><a href="#多个标签页通信" class="headerlink" title="多个标签页通信"></a>多个标签页通信</h2><p>WebSocket、SharedWorker；
也可以调用localstorge、cookies等本地存储方式；</p>
<p>localstorge另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，
我们通过监听事件，控制它的值来进行页面信息通信；
注意quirks：Safari 在无痕模式下设置localstorge值时会抛出 QuotaExceededError 的异常；</p>
<h2 id="CSS的盒子模型-border-sizing-border-box"><a href="#CSS的盒子模型-border-sizing-border-box" class="headerlink" title="CSS的盒子模型 border-sizing (border-box)"></a>CSS的盒子模型 border-sizing (border-box)</h2><p>（1）有两种， IE 盒子模型、W3C 盒子模型；
（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
（3）区  别： IE的content部分把 border 和 padding计算了进去;</p>
<ul>
<li><p>W3C 标准盒模型(content-box)：
<img src="http://cdn.mydearest.cn/blog/images/w3c-box.jpg" alt="w3c"></p>
</li>
<li><p>IE 盒模型(border-box)：
<img src="http://cdn.mydearest.cn/blog/images/ie-box.jpg" alt="ie"></p>
</li>
</ul>
<p>在 IE 盒模型中，盒子宽高不仅包含了元素的宽高，而且包含了元素的边框以及内边距。</p>
<p>所以在同样的设置下，IE 下的元素会看起来相对于标准盒子来的小。</p>
<h2 id="CSS选择符有哪些？哪些属性可以继承？"><a href="#CSS选择符有哪些？哪些属性可以继承？" class="headerlink" title="CSS选择符有哪些？哪些属性可以继承？"></a>CSS选择符有哪些？哪些属性可以继承？</h2><ul>
<li><p>1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul &gt; li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[rel = “external”]）
9.伪类选择器（a:hover, li:nth-child）</p>
</li>
<li><p>可继承的样式： font-size font-family color, UL LI DL DD DT;</p>
</li>
<li><p>不可继承的样式：border padding margin width height ;</p>
</li>
</ul>
<h2 id="css优先级算法"><a href="#css优先级算法" class="headerlink" title="css优先级算法"></a>css优先级算法</h2><ul>
<li>优先级就近原则，同权重情况下样式定义最近者为准;</li>
<li>载入样式以最后载入的定位为准;</li>
</ul>
<p>优先级为:
同权重: 内联样式表（标签内部）&gt; 嵌入样式表（当前文件中）&gt; 外部样式表（外部文件中）。
!important &gt;  id &gt; class &gt; tag
important 比 内联优先级高</p>
<h2 id="css3新增的伪类"><a href="#css3新增的伪类" class="headerlink" title="css3新增的伪类"></a>css3新增的伪类</h2><p>举例：
p:first-of-type    选择属于其父元素的首个 </p><p> 元素的每个 </p><p> 元素。
p:last-of-type    选择属于其父元素的最后 </p><p> 元素的每个 </p><p> 元素。
p:only-of-type    选择属于其父元素唯一的 </p><p> 元素的每个 </p><p> 元素。
p:only-child        选择属于其父元素的唯一子元素的每个 </p><p> 元素。
p:nth-child(2)    选择属于其父元素的第二个子元素的每个 </p><p> 元素。</p>
<p>::after            在元素之前添加内容,也可以用来做清除浮动。
::before            在元素之后添加内容
:enabled<br>:disabled         控制表单控件的禁用状态。
:checked        单选框或复选框被选中。</p>
<h2 id="display有哪些值？"><a href="#display有哪些值？" class="headerlink" title="display有哪些值？"></a>display有哪些值？</h2><p>block           块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
none            元素不显示，并从文档流中移除。
inline          行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
inline-block    默认宽度为内容宽度，可以设置宽高，同行显示。
list-item       象块类型元素一样显示，并添加样式列表标记。
table           此元素会作为块级表格来显示。
inherit         规定应该从父元素继承 display 属性的值。</p>
<h2 id="position有哪些值？"><a href="#position有哪些值？" class="headerlink" title="position有哪些值？"></a>position有哪些值？</h2><ul>
<li><p>fixed：固定定位。元素的位置相对于浏览器窗口定位，即是窗口是滚动的他也不会移动。fixed定位使元素的位置与文档流无关，因此不占据空间。fixed定位的元素和其它元素重叠</p>
</li>
<li><p>relative：如果对一个元素进行相对定位，他将出现在他所在的位置上，然后可以通过设置垂直或水平位置，让这个元素相对于他的起点移动，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间，因此，移动元素将导致它覆盖其他框。</p>
</li>
<li><p>absolute：绝对定位的元素的位置相对于最近的已定位的父元素，如果元素没有已定位的父元素，那么他的位置相对于html。absolute定位使元素的位置与文档流无关，因此不占据空间，absolute定位的元素和其它元素重叠</p>
</li>
<li><p>sticky：粘性定位。元素先按照普通文档流定位，然后相对于该元素在刘中的flow root（BFC）和containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定位，之后为fixed定位</p>
</li>
<li><p>static：默认定位。也就是没有特殊定位，元素出现在正常的流中，忽略top，bottom，left或者z-index声明</p>
</li>
<li><p>inherit： 继承定位。规定应该从父元素继承position的值</p>
</li>
</ul>
<p><code>float</code>元素的display为block。</p>
<h2 id="CSS3有哪些新特性？"><a href="#CSS3有哪些新特性？" class="headerlink" title="CSS3有哪些新特性？"></a>CSS3有哪些新特性？</h2><p>新增各种CSS选择器    （: not(.input)：所有 class 不是“input”的节点）
圆角            （border-radius:8px）
多列布局        （multi-column layout）
阴影和反射    （Shadow\Reflect）
文字特效        （text-shadow）
文字渲染        （Text-decoration）
线性渐变        （gradient）
旋转             （transform）
缩放,定位,倾斜,动画,多背景
例如:transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation: </p>
<h2 id="BFC规范-块级格式化上下文：block-formatting-context-的理解？"><a href="#BFC规范-块级格式化上下文：block-formatting-context-的理解？" class="headerlink" title="BFC规范(块级格式化上下文：block formatting context)的理解？"></a>BFC规范(块级格式化上下文：block formatting context)的理解？</h2><p>BFC（Block Formatting Context）块级格式化上下文，是 Web 页面中盒模型布局的 CSS 渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。</p>
<p>也就是说BFC内部的元素和外部的元素不会互相影响。</p>
<ul>
<li>创建规则：</li>
</ul>
<ol>
<li>根元素</li>
<li>浮动元素（float不是none）</li>
<li>绝对定位元素（position取值为absolute或fixed）</li>
<li>display取值为inline-block,table-cell,table-caption,flex,inline-flex之一的元素</li>
<li>overflow不是visible的元素(hidden、auto、scroll)</li>
</ol>
<ul>
<li>作用特性：</li>
</ul>
<ol>
<li>内部的 Box 会在垂直方向上一个接一个的放置</li>
<li>垂直方向上的距离由 margin 决定；（解决外边距重叠问题）</li>
<li>bfc 的区域不会与 float 的元素区域重叠；（防止浮动文字环绕）</li>
<li>计算 bfc 的高度时，浮动元素也参与计算；（清除浮动）</li>
<li>内部的元素和外部的元素不会互相影响</li>
</ol>
<h2 id="css权重"><a href="#css权重" class="headerlink" title="css权重"></a>css权重</h2><blockquote>
<p>标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值
如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*权重为1*/</span></span><br><span class="line"><span class="selector-tag">div</span>&#123;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/*权重为10*/</span></span><br><span class="line"><span class="selector-class">.class1</span>&#123;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/*权重为100*/</span></span><br><span class="line"><span class="selector-id">#id1</span>&#123;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/*权重为100+1=101*/</span></span><br><span class="line"><span class="selector-id">#id1</span> <span class="selector-tag">div</span>&#123;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/*权重为10+1=11*/</span></span><br><span class="line"><span class="selector-class">.class1</span> <span class="selector-tag">div</span>&#123;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/*权重为10+10+1=21*/</span></span><br><span class="line"><span class="selector-class">.class1</span> <span class="selector-class">.class2</span> <span class="selector-tag">div</span>&#123;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="gitignore说明"><a href="#gitignore说明" class="headerlink" title=".gitignore说明"></a>.gitignore说明</h2><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">.a # 忽略所有 .a 结尾的文件</span><br><span class="line">!lib.a # 但 lib.a 除外</span><br><span class="line">/TODO # 仅仅忽略项目根目录下的 TODO 文件，不包括 subdir/TODO</span><br><span class="line">build/ # 忽略 build/ 目录下的所有文件</span><br><span class="line">doc/.txt # 会忽略 doc/notes.txt 但不包括 doc/server/arch.txt</span><br></pre></td></tr></table></figure>
<p>规则很简单，不做过多解释，但是有时候在项目开发过程中，突然心血来潮想把某些目录或文件加入忽略规则，按照上述方法定义后发现并未生效，原因是 .gitignore 只能忽略那些原来没有被 track 的文件，如果某些文件已经被纳入了版本管理中，则修改 .gitignore 是无效的。那么解决方法就是先把本地缓存删除（改变成未 track 状态），然后再提交：</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">git rm -r --cached .</span><br><span class="line">git add .</span><br><span class="line">git commit -m update .gitignore</span><br></pre></td></tr></table></figure>
<h2 id="外边距合并"><a href="#外边距合并" class="headerlink" title="外边距合并"></a>外边距合并</h2><p>外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
<a href="https://www.w3school.com.cn/css/css_margin_collapsing.asp" target="_blank" rel="noopener">w3school介绍网址</a></p>
<h2 id="如何优化css，提高性能？"><a href="#如何优化css，提高性能？" class="headerlink" title="如何优化css，提高性能？"></a>如何优化css，提高性能？</h2><ul>
<li>使用关键选择器，过滤掉无关的规则</li>
<li>提取项目公共样式，增强可复用性、模块化编写组件</li>
<li>预处理器以及构建工具(postcss<code>后处理器</code>补充前缀、打包压缩、自动优雅降级)</li>
</ul>
<h2 id="margin和padding分别适合什么场景使用？"><a href="#margin和padding分别适合什么场景使用？" class="headerlink" title="margin和padding分别适合什么场景使用？"></a>margin和padding分别适合什么场景使用？</h2><p>margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。
margin用于布局分开元素使元素与元素互不相干；
padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段</p>
<h2 id="如何修改chrome记住密码后自动填充表单的黄色背景-？"><a href="#如何修改chrome记住密码后自动填充表单的黄色背景-？" class="headerlink" title="如何修改chrome记住密码后自动填充表单的黄色背景 ？"></a>如何修改chrome记住密码后自动填充表单的黄色背景 ？</h2><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">input</span><span class="selector-pseudo">:-webkit-autofill</span>, <span class="selector-tag">textarea</span><span class="selector-pseudo">:-webkit-autofill</span>, <span class="selector-tag">select</span><span class="selector-pseudo">:-webkit-autofill</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="built_in">rgb</span>(250, 255, 189); <span class="comment">/*#FAFFBD;*/</span></span><br><span class="line">  <span class="attribute">background-image</span>: none;</span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">rgb</span>(0, 0, 0);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="什么是Cookie-隔离？"><a href="#什么是Cookie-隔离？" class="headerlink" title="什么是Cookie 隔离？"></a>什么是Cookie 隔离？</h2><p>如果静态文件都放在主域名下，那静态文件请求的时候都带有的cookie的数据提交给server的，非常浪费流量，
所以不如隔离开。</p>
<p>因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据，
这样可以降低请求头的大小，降低请求时间，从而达到降低整体请求延时的目的。</p>
<p>同时这种方式不会将cookie传入Web Server，也减少了Web Server对cookie的处理分析环节，
提高了webserver的http请求的解析速度。</p>
<h2 id="ajax缓存问题"><a href="#ajax缓存问题" class="headerlink" title="ajax缓存问题"></a>ajax缓存问题</h2><p>1、在ajax发送请求前加上 anyAjaxObj.setRequestHeader(“If-Modified-Since”,”0”)。</p>
<p>2、在ajax发送请求前加上 anyAjaxObj.setRequestHeader(“Cache-Control”,”no-cache”)。</p>
<p>3、在URL后面加上一个随机数： “fresh=” + Math.random();。</p>
<p>4、在URL后面加上时间戳：”nowtime=” + new Date().getTime();。</p>
<p>5、如果是使用jQuery，直接这样就可以了 $.ajaxSetup({cache:false})。这样页面的所有ajax都会执行这条语句就是不需要保存缓存记录。</p>
<p>模块化开发，采用立即执行函数不暴露私有成员。</p>
<h2 id="jquery-extend-与-jquery-fn-extend的区别？"><a href="#jquery-extend-与-jquery-fn-extend的区别？" class="headerlink" title="jquery.extend 与 jquery.fn.extend的区别？"></a>jquery.extend 与 jquery.fn.extend的区别？</h2><ul>
<li>jquery.extend：为jquery类添加类方法，可以理解为添加静态方法</li>
<li>jquery.fn.extend: 源码中jquery.fn = jquery.prototype，所以对jquery.fn的扩展，就是为jquery类添加成员函数</li>
</ul>
<blockquote>
<p>jquery.extend扩展，需要通过jquery类来调用，而jquery.fn.extend扩展，所有jquery实例都可以直接调用。</p>
</blockquote>
<h2 id="jquery一个对象绑定多个事件"><a href="#jquery一个对象绑定多个事件" class="headerlink" title="jquery一个对象绑定多个事件"></a>jquery一个对象绑定多个事件</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 多个事件同一个函数</span></span><br><span class="line">$(<span class="string">"div"</span>).on(<span class="string">"click mouseover"</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 多个事件不同函数</span></span><br><span class="line">$(<span class="string">"div"</span>).on(&#123;</span><br><span class="line">click: <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;,</span><br><span class="line">mouseover: <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<h2 id="如何不使用loop循环，创建一个长度为100的数组，并且每个元素的值等于它的下标？"><a href="#如何不使用loop循环，创建一个长度为100的数组，并且每个元素的值等于它的下标？" class="headerlink" title="如何不使用loop循环，创建一个长度为100的数组，并且每个元素的值等于它的下标？"></a>如何不使用loop循环，创建一个长度为100的数组，并且每个元素的值等于它的下标？</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.from(<span class="built_in">Array</span>(<span class="number">100</span>).keys())</span><br><span class="line"></span><br><span class="line">[...Array(<span class="number">100</span>).keys()]</span><br></pre></td></tr></table></figure>
<p>接着乱序排序
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arr.sort( <span class="function"><span class="params">()</span> =&gt;</span> <span class="built_in">Math</span>.random() &gt; <span class="number">.5</span> ? <span class="number">-1</span> : <span class="number">1</span> )</span><br></pre></td></tr></table></figure></p>
<p>前十个数相加
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> [a, b, c, d, e, f, g, h, i, j, ...last] = arr3;</span><br><span class="line"><span class="keyword">var</span> total = a + b + c + d + e + f + g + h + i + j;</span><br></pre></td></tr></table></figure></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> foo = <span class="function">(<span class="params">(x, f = (y = x</span>) =&gt;</span> x + y) =&gt; &#123;</span><br><span class="line">      <span class="keyword">let</span> y = f();</span><br><span class="line">      x = y++;</span><br><span class="line">      <span class="keyword">return</span> [x, y, f(y)]</span><br><span class="line">    &#125;)(<span class="number">2</span>)</span><br><span class="line"><span class="comment">// foo = [4,5,9]</span></span><br></pre></td></tr></table></figure>
<h2 id="link与-import的区别"><a href="#link与-import的区别" class="headerlink" title="link与@import的区别"></a>link与@import的区别</h2><ul>
<li><p>link 是 html 方式，@import是css方式</p>
</li>
<li><p>link最大限度支持并行下载，@import过多嵌套导致串行下载</p>
</li>
<li><p>link可以通过rel=”alternate stylesheet”指定候选样式</p>
</li>
<li><p>浏览器对link支持早于@import，可以使用@import对老浏览器隐藏样式</p>
</li>
<li><p>@import必须在样式规则之前，可以在 css 文件中引用其他文件</p>
</li>
<li><p>总体来说：link 优于@import</p>
</li>
</ul>
<h2 id="PNG-GIF-JPG-的区别"><a href="#PNG-GIF-JPG-的区别" class="headerlink" title="PNG,GIF,JPG 的区别"></a>PNG,GIF,JPG 的区别</h2><ul>
<li>GIF:</li>
</ul>
<p>8 位像素，256 色
无损压缩
支持简单动画
支持 boolean 透明
适合简单动画</p>
<ul>
<li>JPEG：</li>
</ul>
<p>颜色限于 256
有损压缩
可控制压缩质量
不支持透明
适合照片</p>
<ul>
<li>PNG：</li>
</ul>
<p>有 PNG8 和 truecolor PNG
PNG8 类似 GIF 颜色上限为 256，文件小，支持 alpha 透明度，无动画
适合图标、背景、按钮</p>
<h2 id="什么是-FOUC-如何避免"><a href="#什么是-FOUC-如何避免" class="headerlink" title="什么是 FOUC?如何避免"></a>什么是 FOUC?如何避免</h2><p>Flash Of Unstyled Content：用户定义样式表加载之前浏览器使用默认样式显示文档，用户样式加载渲染之后再从新显示文档，造成页面闪烁。解决方法：把样式表放到文档的head</p>
<h2 id="focus-blur-与-focusin-focusout的区别和联系"><a href="#focus-blur-与-focusin-focusout的区别和联系" class="headerlink" title="focus/blur 与 focusin/focusout的区别和联系"></a>focus/blur 与 focusin/focusout的区别和联系</h2><ol>
<li>focus/blur 不冒泡，focusin/focusout 冒泡</li>
<li>focus/blur 兼容性好，focusin/focusout 在除 FireFox 外的浏览器下都保持良好兼容性，如需使用事件托管，可考虑在 FireFox 下使用事件捕获 elem.addEventListener(‘focus’, handler, true)</li>
<li>可获得焦点的元素：</li>
</ol>
<ul>
<li>window</li>
<li>链接被点击或键盘操作</li>
<li>表单空间被点击或键盘操作</li>
<li>设置tabindex属性的元素被点击或键盘操作</li>
</ul>
<h2 id="和-判断相等的流程"><a href="#和-判断相等的流程" class="headerlink" title="== 和 === 判断相等的流程"></a>== 和 === 判断相等的流程</h2><ul>
<li><p>== 
如果两个值类型相同，按照===比较方法进行比较
如果类型不同，使用如下规则进行比较
如果其中一个值是 null，另一个是 undefined，它们相等
如果一个值是数字另一个是字符串，将字符串转换为数字进行比较
如果有布尔类型，将true 转换为 1，false 转换为 0，然后用==规则继续比较
如果一个值是对象，另一个是数字或字符串，将对象转换为原始值然后用==规则继续比较
其他所有情况都认为不相等</p>
</li>
<li><p>===
如果两个值不是相同类型，它们不相等
如果两个值都是 null 或者都是 undefined，它们相等
如果两个值都是布尔类型 true 或者都是 false，它们相等
如果其中有一个是NaN，它们不相等
如果都是数值型并且数值相等，他们相等， -0 等于 0
如果他们都是字符串并且在相同位置包含相同的 16 位值，他它们相等；如果在长度或者内容上不等，它们不相等；两个字符串显示结果相同但是编码不同==和===都认为他们不相等
如果他们指向相同对象、数组、函数，它们相等；如果指向不同对象，他们不相等</p>
</li>
</ul>
<h2 id="对象到字符串的转换"><a href="#对象到字符串的转换" class="headerlink" title="对象到字符串的转换"></a>对象到字符串的转换</h2><p>如果对象有 toString()方法，javascript 调用它。如果返回一个原始值（primitive value 如：string number boolean）,将这个值转换为字符串作为结果
如果对象没有 toString()方法或者返回值不是原始值，javascript 寻找对象的 valueOf()方法，如果存在就调用它，返回结果是原始值则转为字符串作为结果
否则，javascript 不能从 toString()或者 valueOf()获得一个原始值，此时 throws a TypeError</p>
<h2 id="对象到数字的转换"><a href="#对象到数字的转换" class="headerlink" title="对象到数字的转换"></a>对象到数字的转换</h2><p>如果对象有valueOf()方法并且返回元素值，javascript将返回值转换为数字作为结果
否则，如果对象有toString()并且返回原始值，javascript将返回结果转换为数字作为结果
否则，throws a TypeError</p>
<h2 id="lt-gt-lt-gt-的比较规则"><a href="#lt-gt-lt-gt-的比较规则" class="headerlink" title="&lt;,&gt;,&lt;=,&gt;=的比较规则"></a>&lt;,&gt;,&lt;=,&gt;=的比较规则</h2><p>所有比较运算符都支持任意类型，但是比较只支持数字和字符串，所以需要执行必要的转换然后进行比较，转换规则如下:</p>
<p>如果操作数是对象，转换为原始值：如果 valueOf 方法返回原始值，则使用这个值，否则使用 toString 方法的结果，如果转换失败则报错
经过必要的对象到原始值的转换后，如果两个操作数都是字符串，按照字母顺序进行比较（他们的 16 位 unicode 值的大小）
否则，如果有一个操作数不是字符串，将两个操作数转换为数字进行比较</p>
<h2 id="运算符工作流程"><a href="#运算符工作流程" class="headerlink" title="+运算符工作流程"></a>+运算符工作流程</h2><p>如果有操作数是对象，转换为原始值
此时如果有一个操作数是字符串，其他的操作数都转换为字符串并执行连接
否则：所有操作数都转换为数字并执行加法</p>
<h2 id="question"><a href="#question" class="headerlink" title="question"></a>question</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> i = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">if</span> (<span class="function"><span class="keyword">function</span> <span class="title">temp</span>(<span class="params"></span>)</span>&#123;&#125;) &#123;</span><br><span class="line"> i+=<span class="keyword">typeof</span> temp;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(i)</span><br><span class="line"><span class="comment">// '0undefined'</span></span><br></pre></td></tr></table></figure>
<ul>
<li>Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。
属性将会对值四舍五入取整。如果需要小数值</li>
</ul>
<h2 id="什么是构造函数调用？"><a href="#什么是构造函数调用？" class="headerlink" title="什么是构造函数调用？"></a>什么是构造函数调用？</h2><p>使用new关键字，被称为“构造函数调用”</p>
<h2 id="什么是构造函数？"><a href="#什么是构造函数？" class="headerlink" title="什么是构造函数？"></a>什么是构造函数？</h2><p>构造函数 ，是一种特殊的方法。主要用来在创建对象时初始化对象， 即为对象成员变量赋初始值，总与new运算符一起使用在创建对象的语句中。</p>
<h2 id="querySelectorAll-与-getElementsBy-系列的区别"><a href="#querySelectorAll-与-getElementsBy-系列的区别" class="headerlink" title="querySelectorAll 与 getElementsBy 系列的区别"></a>querySelectorAll 与 getElementsBy 系列的区别</h2><ol>
<li><p>querySelectorAll 属于 W3C 中 Selectors API 规范， 而 getElementsBy 系列则属于 W3C DOM 规范。</p>
</li>
<li><p>querySelectorAll 方法接受参数是 CSS 选择符，当传入的是不符合 CSS 选择符规范时会抛出异常，而 getElementsBy 系列则接受的参数是单一的 className，tagName 等等。</p>
</li>
<li><p>从返回值角度来看，querySelectorAll 返回的是不变的结点列表，而 getElementsBy 系列返回的是动态的结点列表。</p>
</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// Demo 1</span></span><br><span class="line"><span class="keyword">var</span> ul = <span class="built_in">document</span>.querySelectorAll(<span class="string">'ul'</span>)[<span class="number">0</span>],</span><br><span class="line">  lis = ul.querySelectorAll(<span class="string">"li"</span>);</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; lis.length ; i++)&#123;</span><br><span class="line">  ul.appendChild(<span class="built_in">document</span>.createElement(<span class="string">"li"</span>));</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// Demo 2</span></span><br><span class="line"><span class="keyword">var</span> ul = <span class="built_in">document</span>.getElementsByTagName(<span class="string">'ul'</span>)[<span class="number">0</span>], </span><br><span class="line">  lis = ul.getElementsByTagName(<span class="string">"li"</span>); </span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; lis.length ; i++)&#123;</span><br><span class="line">  ul.appendChild(<span class="built_in">document</span>.createElement(<span class="string">"li"</span>)); </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>因为 Demo 2 中的 lis 是一个动态的结点列表， 每一次调用 lis 都会重新对文档进行查询，导致无限循环的问题。</p>
<p>而 Demo 1 中的 lis 是一个静态的结点列表，是一个 li 集合的快照，对文档的任何操作都不会对其产生影响。</p>
<ul>
<li><p>普遍认为：getElementsBy 系列性能比 querySelectorAll 好</p>
</li>
<li><p>querySelectorAll 返回值为一个 NodeList，而 getElementsBy 系列返回值为一个 HTMLCollection</p>
</li>
</ul>
<h2 id="NodeList-与-HTMLCollection-区别"><a href="#NodeList-与-HTMLCollection-区别" class="headerlink" title="NodeList 与 HTMLCollection 区别?"></a>NodeList 与 HTMLCollection 区别?</h2><ol>
<li><p>HTMLCollection 是元素集合而 NodeList 是节点集合(即可以包含元素，文本节点，以及注释等等)。</p>
</li>
<li><p>node.childNodes，querySelectorAll(虽然是静态的) 返回的是 NodeList，而 node.children 和 node.getElementsByXXX 返回 HTMLCollection。</p>
</li>
</ol>
<h2 id="如何判断函数是-new-调用还是普通调用"><a href="#如何判断函数是-new-调用还是普通调用" class="headerlink" title="如何判断函数是 new 调用还是普通调用?"></a>如何判断函数是 new 调用还是普通调用?</h2><ul>
<li><p>instanceof</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">if</span>(<span class="keyword">this</span> <span class="keyword">instanceof</span> <span class="built_in">arguments</span>.callee) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'new 调用'</span>);</span><br><span class="line">  &#125;<span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'普通调用'</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> p1 = <span class="keyword">new</span> Person(); <span class="comment">// new 调用</span></span><br><span class="line"><span class="keyword">let</span> p2 = Person(); <span class="comment">// 函数调用</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>通过 constructor</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">if</span>(<span class="keyword">this</span>.constructor === <span class="built_in">arguments</span>.callee) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'new 调用'</span>);</span><br><span class="line">  &#125;<span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'普通调用'</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> p1 = <span class="keyword">new</span> Person(); <span class="comment">// new 调用</span></span><br><span class="line"><span class="keyword">let</span> p2 = Person(); <span class="comment">// 函数调用</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
<h2 id="fetch会发送两次请求的原因"><a href="#fetch会发送两次请求的原因" class="headerlink" title="fetch会发送两次请求的原因"></a>fetch会发送两次请求的原因</h2><p>fetch发送post请求时总是发送两次，第一次状态码是204，第二次才会成功。 原因是，用fetch发送post请求时，第一次发送了一个options请求，询问服务器是否支持修改的请求头，如果支持，则在第二次发送真正的请求</p>
<h2 id="webworker"><a href="#webworker" class="headerlink" title="webworker"></a>webworker</h2><p>在html页面中，如果在执行脚本时，页面的状态是不可响应的，直到脚本执行完成后页面才变为可响应。web worker是运行在后台的js，独立于其他脚本，不会影响页面。并且通过postMessage将结果回转至主线程。</p>
<h2 id="一句话概括RESTFUL"><a href="#一句话概括RESTFUL" class="headerlink" title="一句话概括RESTFUL"></a>一句话概括RESTFUL</h2><p>用url定位资源，用http描述操作</p>
<h2 id="设备像素比（DPR-device-pixel-redio）"><a href="#设备像素比（DPR-device-pixel-redio）" class="headerlink" title="设备像素比（DPR device pixel redio）"></a>设备像素比（DPR device pixel redio）</h2><p>1DPR = 物理像素/分辨率 也就是物理像素在屏幕上最佳的逻辑像素大小</p>
<p>在不缩放的情况下，一个逻辑像素就等于一个DPR，即1逻辑像素 = 物理像素/分辨率</p>
<ul>
<li><p>自适应</p>
<ul>
<li>媒体查询</li>
<li>百分比</li>
<li>rem(都只相对于浏览器的根元素HTML 默认情况下html元素的font-size为16px，所以1rem=16px的font-size)
为了计算方便<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">html</span> &#123;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">62.5%</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
</ul>
<p>这个意思是默认字体尺寸的62.5%，也就是 16*62.5%=10px，此时我们就有1rem = 10px。</p>
<h2 id="click在ios上有300ms的延迟，原因和解决办法"><a href="#click在ios上有300ms的延迟，原因和解决办法" class="headerlink" title="click在ios上有300ms的延迟，原因和解决办法"></a>click在ios上有300ms的延迟，原因和解决办法</h2><p>苹果上有一个双击缩放网页的功能，当第一次click时候浏览器会等待300ms判定用户是否要双击，所以点击一次后会延迟300ms才发生click事件。</p>
<p>解决办法：</p>
<ol>
<li><p>禁用缩放：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;meta name=<span class="string">"viewport"</span> content=<span class="string">"width=device-width;user-scalable=no;"</span>&gt;</span><br></pre></td></tr></table></figure>
</li>
<li><p>利用fastClick：
检测到touchend事件时立即发出模拟click事件，并且把浏览器300ms后发出的点击事件给阻断掉。</p>
</li>
</ol>
<h2 id="浏览器缓存的四种实现方法"><a href="#浏览器缓存的四种实现方法" class="headerlink" title="浏览器缓存的四种实现方法"></a>浏览器缓存的四种实现方法</h2><ul>
<li>Service Worker</li>
<li>Memory Cache</li>
<li>Disk Cache</li>
<li>Push Cache</li>
</ul>
<p>浏览器的三级缓存原理：</p>
<ol>
<li><p>先去内存看，如果有，直接加载</p>
</li>
<li><p>如果内存没有，择取硬盘获取，如果有直接加载</p>
</li>
<li><p>如果硬盘也没有，那么就进行网络请求</p>
</li>
<li><p>加载到的资源缓存到硬盘和内存</p>
</li>
</ol>
<h2 id="在地址栏里输入一个url到页面呈现出来，中间发生了什么？"><a href="#在地址栏里输入一个url到页面呈现出来，中间发生了什么？" class="headerlink" title="在地址栏里输入一个url到页面呈现出来，中间发生了什么？"></a>在地址栏里输入一个url到页面呈现出来，中间发生了什么？</h2><ul>
<li>输入url，查询对应ip（dns解析）<ul>
<li>先查找缓存：浏览器缓存-&gt;系统缓存-&gt;路由器缓存</li>
<li>没有查到则查找系统的hosts文件中是否有记录，</li>
<li>没有则查询DNS服务器</li>
</ul>
</li>
<li>建立tcp连接</li>
<li>根据ip和端口号构建一个http请求，封装为tcp包，请求传输：应用层-&gt;传输层-&gt;网络层-&gt;数据链路层-&gt;物理层</li>
<li>到达服务器，服务器解析请求作出响应</li>
<li>浏览器接收到html构建DOM树（中途如果遇到js就会停止构建而去执行会下载脚本）</li>
<li>构建CSSOM树</li>
<li>合并两树为渲染树（排除了非视觉结点）</li>
<li>布局（确定个元素的尺寸和位置）</li>
<li>渲染页面</li>
</ul>
<h2 id="Cache-control的值有哪些"><a href="#Cache-control的值有哪些" class="headerlink" title="Cache-control的值有哪些"></a>Cache-control的值有哪些</h2><p>Cache-control是一个通用消息头字段，被用于HTTP请求和响应中。通过指定指令来实现缓存机制，这个缓存指令是单向的，常见的取值有：</p>
<ul>
<li>private(默认)</li>
<li>no-cache</li>
<li>max-age</li>
<li>must-revalidate</li>
</ul>
<h2 id="如何画0-5px的线"><a href="#如何画0-5px的线" class="headerlink" title="如何画0.5px的线"></a>如何画0.5px的线</h2><ul>
<li><p>采用视口控制</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width;initial-scale=0.5;user-scalable=no;"</span> /&gt;</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>border-image
需要自己制作一个0.5px的线条图片</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">p</span> &#123;</span><br><span class="line">    <span class="attribute">border-width</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">1px</span> <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">border-image</span>: <span class="built_in">url</span>(xxx.png) <span class="number">2</span> <span class="number">0</span> round;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>transform</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">p</span> &#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">scaleY</span>(0.5);</span><br><span class="line">    <span class="attribute">transform-origin</span>: <span class="number">50%</span> <span class="number">100%</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
</ul>
<h2 id="transition和animation的区别"><a href="#transition和animation的区别" class="headerlink" title="transition和animation的区别"></a>transition和animation的区别</h2><ul>
<li>animation：动画，不需要触发任何事件就可以改变属性值 </li>
<li>transition：过渡，需要触发某事件才能改变属性</li>
</ul>
<p>创建动画序列，需要使用animation属性或者其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现。动画的实际表现是由@keyframes规则实现</p>
<p>transition也可以实现动画，transition强调过渡，是元素的一个或多个属性发生变化时产生的过渡效果，同一个元素通过两个不同途径获取样式，而第二个途径当某种改变发生时才能获取样式，这样就会产生过渡动画</p>
<h2 id="关于js动画和css3动画的差异性"><a href="#关于js动画和css3动画的差异性" class="headerlink" title="关于js动画和css3动画的差异性"></a>关于js动画和css3动画的差异性</h2><p>渲染线程分为main thread和compositor thread。如果css动画只改变transform和opacity，这时候整个css动画在compositor thread得以完成（而js动画会在main thread执行然后compositor thread进行下一步操作），特别注意的是如果改变transform和opacity是不会layout和paint的.</p>
<ul>
<li>区别<ul>
<li>功能覆盖面，js比css大 实现或者重构难度不一，</li>
<li>css3比js简单，性能调优方向固定 对帧速表现不好的浏览器，</li>
<li>css3可以做到自然降级 css动画有天然事件支持 css3有兼容性问题</li>
</ul>
</li>
</ul>
<p><code>calc属性使用户可以动态计算长度值。任何长度值都可以使用calc()函数来计算</code></p>
<h2 id="快速下载git"><a href="#快速下载git" class="headerlink" title="快速下载git"></a>快速下载git</h2><p><a href="https://npm.taobao.org/mirrors/git-for-windows/" target="_blank" rel="noopener">https://npm.taobao.org/mirrors/git-for-windows/</a>
科学计数法 1e3 === 1000</p>
<h2 id="双边距重叠问题（外边距折叠）"><a href="#双边距重叠问题（外边距折叠）" class="headerlink" title="双边距重叠问题（外边距折叠）"></a>双边距重叠问题（外边距折叠）</h2><p>现象：多个相邻（兄弟或者父子关系）普通流的块元素垂直方向margin会重叠</p>
<p>折叠结果为：</p>
<p>两个相邻的外边距都是正数时，折叠结果是较大者 两个相邻的外边距都是负数时，折叠结果是绝对值较大者 两个相邻的外边距一正一负时，折叠结果是两者的和</p>
<h2 id="display：table和本身table有什么区别"><a href="#display：table和本身table有什么区别" class="headerlink" title="display：table和本身table有什么区别"></a>display：table和本身table有什么区别</h2><p>display：table和本身table是相对应的，区别在于display：table的声明能够让一个html元素和它的子节点像table元素一样，使用基于表格的css布局，使我们能够轻松定义一个单元格的边界，背景等样式，而不会产生因为使用了table那样的制表标签导致的语义化问题。</p>
<p>之所以现在逐渐淘汰了table系列表格元素，是因为使用div+css编写出来的文件比用table编写出来的小，而table必须在页面完全加载完成后才显示，div则是逐行显示，table的嵌套性太多，没有div简洁</p>
<h2 id="line-height和height的区别"><a href="#line-height和height的区别" class="headerlink" title="line-height和height的区别"></a>line-height和height的区别</h2><p>line-height一般是指布局里面一段文字上下行之间的高度，是针对字体来设置的。height一般是指容器的整体高度</p>
<h2 id="重绘和重排"><a href="#重绘和重排" class="headerlink" title="重绘和重排"></a>重绘和重排</h2><h3 id="重绘"><a href="#重绘" class="headerlink" title="重绘"></a>重绘</h3><p>当盒子的位置，大小以及其他属性，例如颜色。字体大小等都确定下来之后，浏览器便把这些元素都按各自的特性绘制一遍，将内容呈现在页面上，重绘是指一个元素外观的改变触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。</p>
<p>触发重绘的条件：改变元素的外观属性</p>
<h3 id="重排：当渲染树中的一部分或全部因为元素的规模尺寸，布局，隐藏等改变而需要重新构建，每个页面至少经历一次重排，即首次加载"><a href="#重排：当渲染树中的一部分或全部因为元素的规模尺寸，布局，隐藏等改变而需要重新构建，每个页面至少经历一次重排，即首次加载" class="headerlink" title="重排：当渲染树中的一部分或全部因为元素的规模尺寸，布局，隐藏等改变而需要重新构建，每个页面至少经历一次重排，即首次加载"></a>重排：当渲染树中的一部分或全部因为元素的规模尺寸，布局，隐藏等改变而需要重新构建，每个页面至少经历一次重排，即首次加载</h3><p>重绘和重排的关系：在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，也就是意味着重排意味着重绘操作，而重绘不一定导致重排
DOM的变化影响到运算内宿的几何属性比如宽高，浏览器重新计算元素的几何属性，其他元素的几何属性也会受到影响，浏览器需要重新构造渲染树，这个过程称为重排，浏览器将受到影响的部分重新绘制在屏幕上的过程称为重绘。</p>
<p>引起重排重绘的原因有:</p>
<ul>
<li>添加或者删除可见的DOM元素</li>
<li>元素尺寸位置的改变</li>
<li>浏览器页面的初始化</li>
<li>浏览器窗口大小发生改变</li>
</ul>
<p>减少重绘重排的方法有</p>
<ul>
<li>不在布局信息改变时做DOM查询</li>
<li>使用csstext，className一次性改变属性</li>
<li>使用fragment</li>
<li>对于多次重排的元素，比如动画，使用绝对定位脱离文档流，使其不影响其他元素</li>
</ul>
<h2 id="ajax阻止缓存请求"><a href="#ajax阻止缓存请求" class="headerlink" title="ajax阻止缓存请求"></a>ajax阻止缓存请求</h2><ul>
<li>在ajax发送请求前加上ajaxObj.setRequestHeader(“If-Modified-Since”, “0”)</li>
<li>在ajax发送请求前加上ajaxObj.setRequestHeader(“Cache-Control”, “no-cache”)</li>
<li>在url后面加一个随机数：”fresh=”+Math.rendom()</li>
<li>在url后面加上时间戳：”nowtime=”+new Date().getTime()</li>
</ul>
<h2 id="实现单例模式-闭包"><a href="#实现单例模式-闭包" class="headerlink" title="实现单例模式(闭包)"></a>实现单例模式(闭包)</h2><ul>
<li>模仿块级作用域，保存外部函数的变量，封装私有变量<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">this</span>.name = name;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Singleton</span> = <span class="title">function</span>(<span class="params">constructor</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> ret;</span><br><span class="line">    <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="keyword">if</span>(!ret) ret = <span class="keyword">new</span> <span class="keyword">constructor</span>(...arguments);</span><br><span class="line">        return ret;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
</ul>
<h2 id="三栏等宽图片布局"><a href="#三栏等宽图片布局" class="headerlink" title="三栏等宽图片布局"></a>三栏等宽图片布局</h2><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">img</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: block;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">30%</span>;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">2.5%</span> <span class="number">0</span> <span class="number">0</span> <span class="number">2.5%</span>;</span><br><span class="line">    <span class="attribute">float</span>: left;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="表单提交的常用方式是什么，应用层和通信层发生了什么过程？"><a href="#表单提交的常用方式是什么，应用层和通信层发生了什么过程？" class="headerlink" title="表单提交的常用方式是什么，应用层和通信层发生了什么过程？"></a>表单提交的常用方式是什么，应用层和通信层发生了什么过程？</h2><ul>
<li>在form表单提交时我们最常用的方式时get和post，form表单提交时最要注意的就是enctype，enctype属性默认是application/x-www-form-urlencoded.</li>
<li>在get方式时，浏览器会以当前的enctype编码方式将form数据转化成一个字符串，并将改字符串append到url上，以？分割。加载该新的url</li>
<li><p>在post方式中：</p>
<ul>
<li>如果form中没有type为file的控件时，form也会以默认enctype进行编码。</li>
<li>如果是具有type为file的控件时，enctype得设置成multipart/form-data，这样浏览器会将表单以控件为单位分割，并为每个部分加上Content-Disposition（form-data或者时file）、content-type（默认值为text/plain）、name等信息，并加上分割符（boundary）</li>
</ul>
</li>
<li><p>应用层和通信层发生了什么过程？</p>
<ul>
<li>浏览器发送请求后，DNS（Domain Name System）解析域名得到相应的IP地址。</li>
<li>通过域名访问网页</li>
<li>将域名发送到解析域名的服务器上，有很多专门解析.org、.cn、.com等，最主要有一台根域名服务器</li>
<li><p>找到对应的IP地址</p>
</li>
<li><p>应用层http协议（HyperText Transfer Protocol，超文本传输协议）</p>
<ul>
<li>发送请求的我们称之为客户端（client）、而做出相应的服务器叫做源服务器（origin server）。在客户端和服务端之间可能存在很多中间层，比如代理，网关，隧道等。</li>
<li>http协议中的请求报文和响应报文（具体格式大家可以百度了解下）</li>
</ul>
</li>
<li>通信层（TCP/IP）：<ul>
<li>生成http报文及请求</li>
<li>TCP协议将http请求报文进行分割（为了方便传输），并在每个报文上标记序号和端口号发给网络层（IP协议）</li>
<li>网络层增加作为通信目的的MAC地址后转发给链路层（建立电路连接，整个网络的物理基础，典型协议为以太网和ADSL等）</li>
<li>链路层处理后生成的数据包通过物理层传输到接收端</li>
<li>接收到数据的服务端后按序网上传，</li>
<li>TCP连接的三次握手四次挥手</li>
<li>IP协议实现数据传递到对方计算机</li>
<li>解析请求报文并生成响应报文
TCP协议是一种面向连接的、可靠的字节流的运输层通信协议，TCP是全双工模式。</li>
</ul>
</li>
</ul>
</li>
</ul>

      
    </div>
    
    
    

    <div>
      
        <div>
    
        <div class="text-center line pages-end">
				<span>本文结束<i class="fa fa-meh-o fa-fw"></i>感谢您的阅读</span>
        </div>
    
</div>
      
    </div>

    <div>
      
        
<div class="my_post_copyright">
  <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
  <!-- JS库 sweetalert 可修改路径 -->
  <script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.7.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert@1.0.0/dist/sweetalert.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/sweetalert@1.0.0/dist/sweetalert.css">
  <p><span>本文标题:</span><a href="/interview.html">面试题整理归纳</a></p>
  <p><span>文章作者:</span><a href="/" title="访问 陈宇（cosyer） 的个人博客">陈宇（cosyer）</a></p>
  <p><span>发布时间:</span>2018年06月23日 - 10:06</p>
  <p><span>最后更新:</span>2020年05月24日 - 17:05</p>
  <p><span>原始链接:</span><a href="/interview.html" title="面试题整理归纳">http://mydearest.cn/interview.html</a>
    <span class="copy-path"  title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="http://mydearest.cn/interview.html"  aria-label=" 复制成功！"></i></span>
  </p>
  <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>  
</div>
<script> 
    var clipboard = new Clipboard('.fa-clipboard');
    clipboard.on('success', $(function(){
      $(".fa-clipboard").click(function(){
        swal({
          title: "",     
          text: '复制成功',   
          timer: 500,
          showConfirmButton: false
        });
      });
    }));  
</script>

      
    </div>

    

    
      <div>
        <div style="padding: 10px 0; margin: 20px auto; width: 90%; text-align: center;">
  <div>坚持原创技术分享，您的支持将鼓励我继续创作！</div>
  <button id="rewardButton" disable="enable" onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}">
    <span>赏</span>
  </button>
  <div id="QR" style="display: none;">

    
      <div id="wechat" style="display: inline-block">
        <img id="wechat_qr" src="/images/wechatpay.png" alt="陈宇（cosyer） WeChat Pay"/>
        <p>WeChat Pay</p>
      </div>
    

    
      <div id="alipay" style="display: inline-block">
        <img id="alipay_qr" src="/images/alipay.png" alt="陈宇（cosyer） Alipay"/>
        <p>Alipay</p>
      </div>
    

    

  </div>
</div>

      </div>
    

    

    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/tags/面试/" rel="tag"><i class="fa fa-tag fa-fw"></i> 面试</a>
          
        </div>
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/seo.html" rel="next" title="正确设置网站title、keywords、description">
                <i class="fa fa-chevron-left"></i> 正确设置网站title、keywords、description
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/storage.html" rel="prev" title="详解 Cookie、 LocalStorage 与 SessionStorage">
                详解 Cookie、 LocalStorage 与 SessionStorage <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          
            
  <div class="comments" id="comments">
    
      <div class="comments v" id="comments"></div>
    
  </div>


          
        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap" >
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
          <img class="site-author-image" itemprop="image"
               src="/images/avatar.jpg"
               alt="陈宇（cosyer）" />
          <p class="site-author-name" itemprop="name">陈宇（cosyer）</p>
           
              <p class="site-description motion-element" itemprop="description">不去做的话永远也做不到。</p>
           
        </div>
        <nav class="site-state motion-element">

          
            <div class="site-state-item site-state-posts">
              <a href="/archives/">
                <span class="site-state-item-count">134</span>
                <span class="site-state-item-name">日志</span>
              </a>
            </div>
          

          
            
            
            <div class="site-state-item site-state-categories">
              <a href="/categories/index.html">
                <span class="site-state-item-count">7</span>
                <span class="site-state-item-name">分类</span>
              </a>
            </div>
          

          
            
            
            <div class="site-state-item site-state-tags">
              <a href="/tags/index.html">
                <span class="site-state-item-count">55</span>
                <span class="site-state-item-name">标签</span>
              </a>
            </div>
          

        </nav>

        
          <div class="feed-link motion-element">
            <a href="/rss2.xml" rel="alternate">
              <i class="fa fa-rss"></i>
              RSS
            </a>
          </div>
        

        <div class="links-of-author motion-element">
          
            
              <span class="links-of-author-item">
                <a rel="external nofollow" href="https://github.com/cosyer" target="_blank" title="GitHub">
                  
                    <i class="fa fa-fw fa-github"></i>
                  
                    
                      GitHub
                    
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a rel="external nofollow" href="https://twitter.com/yzchenyu1995" target="_blank" title="Twitter">
                  
                    <i class="fa fa-fw fa-twitter"></i>
                  
                    
                      Twitter
                    
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a rel="external nofollow" href="mailto:yzchenyu1995@gmail.com" target="_blank" title="E-Mail">
                  
                    <i class="fa fa-fw fa-envelope"></i>
                  
                    
                      E-Mail
                    
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a rel="external nofollow" href="https://www.facebook.com/profile.php?id=100025666071215" target="_blank" title="FB Page">
                  
                    <i class="fa fa-fw fa-facebook"></i>
                  
                    
                      FB Page
                    
                </a>
              </span>
            
          
        </div>

        
        

        
        
          <div class="links-of-blogroll motion-element links-of-blogroll-inline">
            <div class="links-of-blogroll-title">
              <i class="fa  fa-fw fa-globe"></i>
              推荐阅读
            </div>
            <ul class="links-of-blogroll-list">
              
                <li class="links-of-blogroll-item">
                  <a rel="external nofollow" href="http://callmesoul.cn" title="Callmesoul" target="_blank">Callmesoul</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a rel="external nofollow" href="https://www.jstips.co/" title="JsTips" target="_blank">JsTips</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a rel="external nofollow" href="http://dir.mydearest.cn/motion/" title="Personal Site" target="_blank">Personal Site</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a rel="external nofollow" href="http://resume.mydearest.cn/" title="Resume" target="_blank">Resume</a>
                </li>
              
            </ul>
          </div>
        

        


      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#字符串扩展的方法"><span class="nav-number">1.</span> <span class="nav-text">字符串扩展的方法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#声明函数作用提升-声明变量和声明函数的提升有什么区别"><span class="nav-number">2.</span> <span class="nav-text">声明函数作用提升?声明变量和声明函数的提升有什么区别?</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#如何判断数据类型？"><span class="nav-number">3.</span> <span class="nav-text">如何判断数据类型？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#异步编程？"><span class="nav-number">4.</span> <span class="nav-text">异步编程？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#事件流？事件捕获？事件冒泡？"><span class="nav-number">5.</span> <span class="nav-text">事件流？事件捕获？事件冒泡？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#如何添加一个dom对象到body中-innerHTML、document-write和innerText区别"><span class="nav-number">6.</span> <span class="nav-text">如何添加一个dom对象到body中?innerHTML、document.write和innerText区别?</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#简述ajax流程"><span class="nav-number">7.</span> <span class="nav-text">简述ajax流程</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#自执行函数？用于什么场景？好处？"><span class="nav-number">8.</span> <span class="nav-text">自执行函数？用于什么场景？好处？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#立即执行函数表达式-IIFE"><span class="nav-number">9.</span> <span class="nav-text">立即执行函数表达式(IIFE)</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#使用匿名函数表达式"><span class="nav-number">9.1.</span> <span class="nav-text">使用匿名函数表达式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#当作函数调用并传递参数进去"><span class="nav-number">9.2.</span> <span class="nav-text">当作函数调用并传递参数进去</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#解决undefined标识符默认值被错误覆盖"><span class="nav-number">9.3.</span> <span class="nav-text">解决undefined标识符默认值被错误覆盖</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#倒置代码运行顺序"><span class="nav-number">9.3.1.</span> <span class="nav-text">倒置代码运行顺序</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#回调函数？（传递地址，由非实现方调用）"><span class="nav-number">10.</span> <span class="nav-text">回调函数？（传递地址，由非实现方调用）</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#什么是闭包-堆栈溢出有什么区别？-内存泄漏-那些操作会造成内存泄漏？怎么样防止内存泄漏？impression"><span class="nav-number">11.</span> <span class="nav-text">什么是闭包?堆栈溢出有什么区别？ 内存泄漏? 那些操作会造成内存泄漏？怎么样防止内存泄漏？impression</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#html和xhtml有什么区别"><span class="nav-number">12.</span> <span class="nav-text">html和xhtml有什么区别?</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#什么是构造函数？与普通函数有什么区别"><span class="nav-number">13.</span> <span class="nav-text">什么是构造函数？与普通函数有什么区别?</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#通过new创建一个对象的时候，函数内部有哪些改变？"><span class="nav-number">14.</span> <span class="nav-text">通过new创建一个对象的时候，函数内部有哪些改变？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#事件委托的好处都有啥？说对了都给它-3"><span class="nav-number">15.</span> <span class="nav-text">事件委托的好处都有啥？说对了都给它=3=</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#节点类型-判断当前节点类型"><span class="nav-number">16.</span> <span class="nav-text">节点类型?判断当前节点类型?</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#数组合并的方法？"><span class="nav-number">17.</span> <span class="nav-text">数组合并的方法？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#jquery和zepto有什么区别"><span class="nav-number">18.</span> <span class="nav-text">jquery和zepto有什么区别?</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#function-和window-onload-和-document-ready-function"><span class="nav-number">19.</span> <span class="nav-text">$(function(){})和window.onload 和 $(document).ready(function(){})</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#简述下-this-和定义属性和方法的时候有什么区别-Prototype？"><span class="nav-number">20.</span> <span class="nav-text">简述下 this 和定义属性和方法的时候有什么区别?Prototype？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#ajax和jsonp的区别？"><span class="nav-number">21.</span> <span class="nav-text">ajax和jsonp的区别？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#常见的http协议状态码？"><span class="nav-number">22.</span> <span class="nav-text">常见的http协议状态码？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#sessionStorage和localstroage与cookie之间有什么关联-cookie最大存放多少字节？"><span class="nav-number">23.</span> <span class="nav-text">sessionStorage和localstroage与cookie之间有什么关联, cookie最大存放多少字节？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#ajax的get与post区别？"><span class="nav-number">24.</span> <span class="nav-text">ajax的get与post区别？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#GC机制？为什么闭包不会被回收变量和函数？"><span class="nav-number">25.</span> <span class="nav-text">GC机制？为什么闭包不会被回收变量和函数？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#jsonp的原理和缺点？"><span class="nav-number">26.</span> <span class="nav-text">jsonp的原理和缺点？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#call和apply两者的区别和好处？"><span class="nav-number">27.</span> <span class="nav-text">call和apply两者的区别和好处？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#压缩合并目的？http请求的优化方式？"><span class="nav-number">28.</span> <span class="nav-text">压缩合并目的？http请求的优化方式？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#commonjs-requirejs-AMD-CMD-UMD"><span class="nav-number">29.</span> <span class="nav-text">commonjs?requirejs?AMD|CMD|UMD?</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#js的几种继承方式？"><span class="nav-number">30.</span> <span class="nav-text">js的几种继承方式？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#js原型、原型链，有什么特点？"><span class="nav-number">31.</span> <span class="nav-text">js原型、原型链，有什么特点？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#eval是做什么的？"><span class="nav-number">32.</span> <span class="nav-text">eval是做什么的？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#null和undefined"><span class="nav-number">33.</span> <span class="nav-text">null和undefined</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#json的理解？"><span class="nav-number">34.</span> <span class="nav-text">json的理解？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#js延时加载的方式？"><span class="nav-number">35.</span> <span class="nav-text">js延时加载的方式？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#ajax（异步的js和xml）"><span class="nav-number">36.</span> <span class="nav-text">ajax（异步的js和xml）</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#同异步的区别？"><span class="nav-number">37.</span> <span class="nav-text">同异步的区别？</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是异步"><span class="nav-number">37.1.</span> <span class="nav-text">什么是异步</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#为什么要异步"><span class="nav-number">37.2.</span> <span class="nav-text">为什么要异步</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#ajax的缺点？"><span class="nav-number">38.</span> <span class="nav-text">ajax的缺点？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#跨域问题？"><span class="nav-number">39.</span> <span class="nav-text">跨域问题？</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#同源策略"><span class="nav-number">39.1.</span> <span class="nav-text">同源策略</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#解决异步回调地狱有哪些方案？"><span class="nav-number">40.</span> <span class="nav-text">解决异步回调地狱有哪些方案？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#图片的预加载和懒加载？"><span class="nav-number">41.</span> <span class="nav-text">图片的预加载和懒加载？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#mouseover和mouseenter的区别？"><span class="nav-number">42.</span> <span class="nav-text">mouseover和mouseenter的区别？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#改变函数内部this指针的指向函数（bind，apply，call的区别）？"><span class="nav-number">43.</span> <span class="nav-text">改变函数内部this指针的指向函数（bind，apply，call的区别）？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#说说前端中的事件流"><span class="nav-number">44.</span> <span class="nav-text">说说前端中的事件流</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#如何让事件先冒泡后执行？"><span class="nav-number">45.</span> <span class="nav-text">如何让事件先冒泡后执行？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#什么是事件委托？（事件代理）"><span class="nav-number">46.</span> <span class="nav-text">什么是事件委托？（事件代理）</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#垂直居中"><span class="nav-number">47.</span> <span class="nav-text">垂直居中</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#visibility-hidden-opacity-0，display-none"><span class="nav-number">48.</span> <span class="nav-text">visibility=hidden, opacity=0，display:none</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#块元素和行内元素"><span class="nav-number">49.</span> <span class="nav-text">块元素和行内元素</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#深拷贝"><span class="nav-number">50.</span> <span class="nav-text">深拷贝</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#判断一个变量是否是数组"><span class="nav-number">51.</span> <span class="nav-text">判断一个变量是否是数组</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#优化"><span class="nav-number">52.</span> <span class="nav-text">优化</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#行内、块级、空元素"><span class="nav-number">53.</span> <span class="nav-text">行内、块级、空元素</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#px、em、rem的区别"><span class="nav-number">54.</span> <span class="nav-text">px、em、rem的区别</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#路由权限管理"><span class="nav-number">55.</span> <span class="nav-text">路由权限管理</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#node中的事件循环是什么样子的"><span class="nav-number">56.</span> <span class="nav-text">node中的事件循环是什么样子的?</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#清空数组"><span class="nav-number">57.</span> <span class="nav-text">清空数组</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#判断数组中出现次数最多的元素"><span class="nav-number">58.</span> <span class="nav-text">判断数组中出现次数最多的元素</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#清除浮动"><span class="nav-number">59.</span> <span class="nav-text">清除浮动</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#margin-top和padding-left根据height还是width？"><span class="nav-number">60.</span> <span class="nav-text">margin-top和padding-left根据height还是width？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vue的非父子组件传递"><span class="nav-number">61.</span> <span class="nav-text">vue的非父子组件传递</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#原生js实现拖拽"><span class="nav-number">62.</span> <span class="nav-text">原生js实现拖拽</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#实现函数监听函数发布订阅模式-on-emit-off-方法-类似-iflux"><span class="nav-number">63.</span> <span class="nav-text">实现函数监听函数发布订阅模式 on emit off 方法 类似 iflux</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#左边固定，右边自适应布局"><span class="nav-number">64.</span> <span class="nav-text">左边固定，右边自适应布局</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#mysql-字符转换"><span class="nav-number">65.</span> <span class="nav-text">mysql 字符转换</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#empty-和html-“”"><span class="nav-number">66.</span> <span class="nav-text">empty()和html(“”)</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#react、vue多个class"><span class="nav-number">67.</span> <span class="nav-text">react、vue多个class</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#react"><span class="nav-number">67.1.</span> <span class="nav-text">react</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#vue"><span class="nav-number">67.2.</span> <span class="nav-text">vue</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vue组件通信"><span class="nav-number">68.</span> <span class="nav-text">vue组件通信</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#网络七层协议"><span class="nav-number">69.</span> <span class="nav-text">网络七层协议</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#call使用"><span class="nav-number">70.</span> <span class="nav-text">call使用</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#css选择器的优先级"><span class="nav-number">71.</span> <span class="nav-text">css选择器的优先级</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#事件队列（eventLoop）"><span class="nav-number">72.</span> <span class="nav-text">事件队列（eventLoop）</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vue中watch和computed的区别"><span class="nav-number">73.</span> <span class="nav-text">vue中watch和computed的区别</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#简单介绍es6"><span class="nav-number">74.</span> <span class="nav-text">简单介绍es6</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#js模块化"><span class="nav-number">75.</span> <span class="nav-text">js模块化</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#图片加载成功或者失败"><span class="nav-number">76.</span> <span class="nav-text">图片加载成功或者失败</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#递归和迭代的区别"><span class="nav-number">77.</span> <span class="nav-text">递归和迭代的区别</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#原生JS操作DOM的方法有哪些？"><span class="nav-number">78.</span> <span class="nav-text">原生JS操作DOM的方法有哪些？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#setTimeout和setInterval的区别，包含内存方面的分析？"><span class="nav-number">79.</span> <span class="nav-text">setTimeout和setInterval的区别，包含内存方面的分析？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#addEventListener有哪些参数？"><span class="nav-number">80.</span> <span class="nav-text">addEventListener有哪些参数？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#将静态资源放在其他域名的目的是什么？"><span class="nav-number">81.</span> <span class="nav-text">将静态资源放在其他域名的目的是什么？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#http状态码301和302的区别"><span class="nav-number">82.</span> <span class="nav-text">http状态码301和302的区别</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#在什么情况下a-a-1"><span class="nav-number">83.</span> <span class="nav-text">在什么情况下a === a-1 ?</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#placeholder样式设置"><span class="nav-number">84.</span> <span class="nav-text">placeholder样式设置</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#巧用currentColor自定义checkbox样式"><span class="nav-number">85.</span> <span class="nav-text">巧用currentColor自定义checkbox样式</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#增补字符不适用String-prototype-charCodeAt和String-fromCharCode"><span class="nav-number">86.</span> <span class="nav-text">增补字符不适用String.prototype.charCodeAt和String.fromCharCode</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#三次握手、四次挥手"><span class="nav-number">87.</span> <span class="nav-text">三次握手、四次挥手</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#幂等性"><span class="nav-number">88.</span> <span class="nav-text">幂等性</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#src和href引入的区别"><span class="nav-number">89.</span> <span class="nav-text">src和href引入的区别</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#a-b-c-d-和-a-‘b’-‘c’-‘d’-，哪个性能更高？"><span class="nav-number">90.</span> <span class="nav-text">a.b.c.d 和 a[‘b’][‘c’][‘d’]，哪个性能更高？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#对象引用"><span class="nav-number">91.</span> <span class="nav-text">对象引用</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Doctype作用？标准模式与兼容模式各有什么区别"><span class="nav-number">92.</span> <span class="nav-text">Doctype作用？标准模式与兼容模式各有什么区别?</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#HTML5-为什么只需要写-lt-DOCTYPE-HTML-gt-？"><span class="nav-number">93.</span> <span class="nav-text">HTML5 为什么只需要写 &lt;!DOCTYPE HTML&gt;？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#对浏览器内核的理解？"><span class="nav-number">94.</span> <span class="nav-text">对浏览器内核的理解？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#html5新特性？"><span class="nav-number">95.</span> <span class="nav-text">html5新特性？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#对HTML语义化的理解？"><span class="nav-number">96.</span> <span class="nav-text">对HTML语义化的理解？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#iframe缺点"><span class="nav-number">97.</span> <span class="nav-text">iframe缺点</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#多个标签页通信"><span class="nav-number">98.</span> <span class="nav-text">多个标签页通信</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#CSS的盒子模型-border-sizing-border-box"><span class="nav-number">99.</span> <span class="nav-text">CSS的盒子模型 border-sizing (border-box)</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#CSS选择符有哪些？哪些属性可以继承？"><span class="nav-number">100.</span> <span class="nav-text">CSS选择符有哪些？哪些属性可以继承？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#css优先级算法"><span class="nav-number">101.</span> <span class="nav-text">css优先级算法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#css3新增的伪类"><span class="nav-number">102.</span> <span class="nav-text">css3新增的伪类</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#display有哪些值？"><span class="nav-number">103.</span> <span class="nav-text">display有哪些值？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#position有哪些值？"><span class="nav-number">104.</span> <span class="nav-text">position有哪些值？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#CSS3有哪些新特性？"><span class="nav-number">105.</span> <span class="nav-text">CSS3有哪些新特性？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#BFC规范-块级格式化上下文：block-formatting-context-的理解？"><span class="nav-number">106.</span> <span class="nav-text">BFC规范(块级格式化上下文：block formatting context)的理解？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#css权重"><span class="nav-number">107.</span> <span class="nav-text">css权重</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#gitignore说明"><span class="nav-number">108.</span> <span class="nav-text">.gitignore说明</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#外边距合并"><span class="nav-number">109.</span> <span class="nav-text">外边距合并</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#如何优化css，提高性能？"><span class="nav-number">110.</span> <span class="nav-text">如何优化css，提高性能？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#margin和padding分别适合什么场景使用？"><span class="nav-number">111.</span> <span class="nav-text">margin和padding分别适合什么场景使用？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#如何修改chrome记住密码后自动填充表单的黄色背景-？"><span class="nav-number">112.</span> <span class="nav-text">如何修改chrome记住密码后自动填充表单的黄色背景 ？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#什么是Cookie-隔离？"><span class="nav-number">113.</span> <span class="nav-text">什么是Cookie 隔离？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#ajax缓存问题"><span class="nav-number">114.</span> <span class="nav-text">ajax缓存问题</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#jquery-extend-与-jquery-fn-extend的区别？"><span class="nav-number">115.</span> <span class="nav-text">jquery.extend 与 jquery.fn.extend的区别？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#jquery一个对象绑定多个事件"><span class="nav-number">116.</span> <span class="nav-text">jquery一个对象绑定多个事件</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#如何不使用loop循环，创建一个长度为100的数组，并且每个元素的值等于它的下标？"><span class="nav-number">117.</span> <span class="nav-text">如何不使用loop循环，创建一个长度为100的数组，并且每个元素的值等于它的下标？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#link与-import的区别"><span class="nav-number">118.</span> <span class="nav-text">link与@import的区别</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#PNG-GIF-JPG-的区别"><span class="nav-number">119.</span> <span class="nav-text">PNG,GIF,JPG 的区别</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#什么是-FOUC-如何避免"><span class="nav-number">120.</span> <span class="nav-text">什么是 FOUC?如何避免</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#focus-blur-与-focusin-focusout的区别和联系"><span class="nav-number">121.</span> <span class="nav-text">focus/blur 与 focusin/focusout的区别和联系</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#和-判断相等的流程"><span class="nav-number">122.</span> <span class="nav-text">== 和 === 判断相等的流程</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#对象到字符串的转换"><span class="nav-number">123.</span> <span class="nav-text">对象到字符串的转换</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#对象到数字的转换"><span class="nav-number">124.</span> <span class="nav-text">对象到数字的转换</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#lt-gt-lt-gt-的比较规则"><span class="nav-number">125.</span> <span class="nav-text">&lt;,&gt;,&lt;=,&gt;=的比较规则</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#运算符工作流程"><span class="nav-number">126.</span> <span class="nav-text">+运算符工作流程</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#question"><span class="nav-number">127.</span> <span class="nav-text">question</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#什么是构造函数调用？"><span class="nav-number">128.</span> <span class="nav-text">什么是构造函数调用？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#什么是构造函数？"><span class="nav-number">129.</span> <span class="nav-text">什么是构造函数？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#querySelectorAll-与-getElementsBy-系列的区别"><span class="nav-number">130.</span> <span class="nav-text">querySelectorAll 与 getElementsBy 系列的区别</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#NodeList-与-HTMLCollection-区别"><span class="nav-number">131.</span> <span class="nav-text">NodeList 与 HTMLCollection 区别?</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#如何判断函数是-new-调用还是普通调用"><span class="nav-number">132.</span> <span class="nav-text">如何判断函数是 new 调用还是普通调用?</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#fetch会发送两次请求的原因"><span class="nav-number">133.</span> <span class="nav-text">fetch会发送两次请求的原因</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#webworker"><span class="nav-number">134.</span> <span class="nav-text">webworker</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#一句话概括RESTFUL"><span class="nav-number">135.</span> <span class="nav-text">一句话概括RESTFUL</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#设备像素比（DPR-device-pixel-redio）"><span class="nav-number">136.</span> <span class="nav-text">设备像素比（DPR device pixel redio）</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#click在ios上有300ms的延迟，原因和解决办法"><span class="nav-number">137.</span> <span class="nav-text">click在ios上有300ms的延迟，原因和解决办法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#浏览器缓存的四种实现方法"><span class="nav-number">138.</span> <span class="nav-text">浏览器缓存的四种实现方法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#在地址栏里输入一个url到页面呈现出来，中间发生了什么？"><span class="nav-number">139.</span> <span class="nav-text">在地址栏里输入一个url到页面呈现出来，中间发生了什么？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Cache-control的值有哪些"><span class="nav-number">140.</span> <span class="nav-text">Cache-control的值有哪些</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#如何画0-5px的线"><span class="nav-number">141.</span> <span class="nav-text">如何画0.5px的线</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#transition和animation的区别"><span class="nav-number">142.</span> <span class="nav-text">transition和animation的区别</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#关于js动画和css3动画的差异性"><span class="nav-number">143.</span> <span class="nav-text">关于js动画和css3动画的差异性</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#快速下载git"><span class="nav-number">144.</span> <span class="nav-text">快速下载git</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#双边距重叠问题（外边距折叠）"><span class="nav-number">145.</span> <span class="nav-text">双边距重叠问题（外边距折叠）</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#display：table和本身table有什么区别"><span class="nav-number">146.</span> <span class="nav-text">display：table和本身table有什么区别</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#line-height和height的区别"><span class="nav-number">147.</span> <span class="nav-text">line-height和height的区别</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#重绘和重排"><span class="nav-number">148.</span> <span class="nav-text">重绘和重排</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#重绘"><span class="nav-number">148.1.</span> <span class="nav-text">重绘</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#重排：当渲染树中的一部分或全部因为元素的规模尺寸，布局，隐藏等改变而需要重新构建，每个页面至少经历一次重排，即首次加载"><span class="nav-number">148.2.</span> <span class="nav-text">重排：当渲染树中的一部分或全部因为元素的规模尺寸，布局，隐藏等改变而需要重新构建，每个页面至少经历一次重排，即首次加载</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#ajax阻止缓存请求"><span class="nav-number">149.</span> <span class="nav-text">ajax阻止缓存请求</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#实现单例模式-闭包"><span class="nav-number">150.</span> <span class="nav-text">实现单例模式(闭包)</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#三栏等宽图片布局"><span class="nav-number">151.</span> <span class="nav-text">三栏等宽图片布局</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#表单提交的常用方式是什么，应用层和通信层发生了什么过程？"><span class="nav-number">152.</span> <span class="nav-text">表单提交的常用方式是什么，应用层和通信层发生了什么过程？</span></a></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright" >
  
  &copy; 
  <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">陈宇（cosyer）</span>
</div>
<div>
 <span class="alive"></span>
 </div>
<div class="powered-by">
  <i class="fa fa-users fa-fw"></i>
  <span id="busuanzi_container_site_uv">
    终于等到你(UV): <span id="busuanzi_value_site_uv"></span>
  </span>
  &nbsp;&nbsp;|&nbsp;&nbsp;
  <i class="fa fa-bar-chart-o fa-fw"></i>
  <span id="busuanzi_container_site_pv">
    欢迎再来(PV): <span id="busuanzi_value_site_pv"></span>
  </span>

  <div class="theme-info">
    <div class="powered-by"></div>
    <span class="post-count">Blog总字数: 234.6k字</span>
  </div>

  <div class="theme-info">
    <div class="powered-by"></div>
    <a class="post-count" href="http://www.beian.miit.gov.cn/" target="_blank">苏ICP备17005342号-1</a>
  </div>
</div>

<!--


<div class="powered-by">
  由 <a class="theme-link" href="https://hexo.io">Hexo</a> 强力驱动
</div>

<div class="theme-info">
  主题 -
  <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
    NexT.Mist
  </a>
</div>

-->

        

        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>
<script type="text/javascript" src="https://cdn.lishaoy.net/js/index.js"></script>

















  


  
  

  
  



  


  


  




	





  






  <script src="https://cdn.lishaoy.net/js/av-min.js"></script>
  
  <script src='https://cdn.lishaoy.net/js/Valine.min.js'></script>

  <script type="text/javascript">
    var GUEST = ['nick','mail','link'];
    var guest = '';
    guest = guest.split(',').filter(item=>{
      return GUEST.indexOf(item)>-1;
    });
    new Valine({
        av: AV,
        el: '#comments' ,
        appId: 'SKflNaQWS70153r2kOqgcGge-gzGzoHsz',
        appKey: 'gE9ySnRyOkS4UNzYJ7GOCa56',
        placeholder: '想说点什么 ：）',
        avatar: 'retro'
    });
  </script>



  

  <script type="text/javascript">
    // Popup Window;
    var isfetched = false;
    var isXml = true;
    // Search DB path;
    var search_path = "search.json";
    if (search_path.length === 0) {
      search_path = "search.xml";
    } else if (/json$/i.test(search_path)) {
      isXml = false;
    }
    var path = "/" + search_path;
    // monitor main search box;

    var onPopupClose = function (e) {
      $('.popup').hide();
      $('#local-search-input').val('');
      $('.search-result-list').remove();
      $('#no-result').remove();
      $(".local-search-pop-overlay").remove();
      $('body').css('overflow', '');
    }

    function proceedsearch() {
      $("body")
        .append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
        .css('overflow', 'hidden');
      $('.search-popup-overlay').click(onPopupClose);
      $('.popup').toggle();
      var $localSearchInput = $('#local-search-input');
      $localSearchInput.attr("autocapitalize", "none");
      $localSearchInput.attr("autocorrect", "off");
      $localSearchInput.focus();
    }

    // search function;
    var searchFunc = function(path, search_id, content_id) {
      'use strict';

      // start loading animation
      $("body")
        .append('<div class="search-popup-overlay local-search-pop-overlay">' +
          '<div id="search-loading-icon">' +
          '<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
          '</div>' +
          '</div>')
        .css('overflow', 'hidden');
      $("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');

      $.ajax({
        url: path,
        dataType: isXml ? "xml" : "json",
        async: true,
        success: function(res) {
          // get the contents from search data
          isfetched = true;
          $('.popup').detach().appendTo('.header-inner');
          var datas = isXml ? $("entry", res).map(function() {
            return {
              title: $("title", this).text(),
              content: $("content",this).text(),
              url: $("url" , this).text()
            };
          }).get() : res;
          var input = document.getElementById(search_id);
          var resultContent = document.getElementById(content_id);
          var inputEventFunction = function() {
            var searchText = input.value.trim().toLowerCase();
            var keywords = searchText.split(/[\s\-]+/);
            if (keywords.length > 1) {
              keywords.push(searchText);
            }
            var resultItems = [];
            if (searchText.length > 0&&datas.length>0) {
              // perform local searching
              datas.forEach(function(data) {
                var isMatch = false;
                var hitCount = 0;
                var searchTextCount = 0;
                var title = data.title.trim();
                var titleInLowerCase = title.toLowerCase();
                var content =  data.content&&data.content.trim().replace(/<[^>]+>/g,"");
                var contentInLowerCase = content&&content.toLowerCase();
                var articleUrl = decodeURIComponent(data.url);
                var indexOfTitle = [];
                var indexOfContent = [];
                // only match articles with not empty titles
                if(title != '') {
                  keywords.forEach(function(keyword) {
                    function getIndexByWord(word, text, caseSensitive) {
                      var wordLen = word.length;
                      if (wordLen === 0) {
                        return [];
                      }
                      var startPosition = 0, position = [], index = [];
                      if (!caseSensitive) {
                        text = text&&text.toLowerCase();
                        word = word&&word.toLowerCase();
                      }
                      while ((position = text&&text.indexOf(word, startPosition)) > -1) {
                        index.push({position: position, word: word});
                        startPosition = position + wordLen;
                      }
                      return index;
                    }

                    indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
                    indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
                  });
                  if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
                    isMatch = true;
                    hitCount = indexOfTitle.length + indexOfContent.length;
                  }
                }

                // show search results

                if (isMatch) {
                  // sort index by position of keyword

                  [indexOfTitle, indexOfContent].forEach(function (index) {
                    index.sort(function (itemLeft, itemRight) {
                      if (itemRight.position !== itemLeft.position) {
                        return itemRight.position - itemLeft.position;
                      } else {
                        return itemLeft.word.length - itemRight.word.length;
                      }
                    });
                  });

                  // merge hits into slices

                  function mergeIntoSlice(text, start, end, index) {
                    var item = index[index.length - 1];
                    var position = item.position;
                    var word = item.word;
                    var hits = [];
                    var searchTextCountInSlice = 0;
                    while (position + word.length <= end && index.length != 0) {
                      if (word === searchText) {
                        searchTextCountInSlice++;
                      }
                      hits.push({position: position, length: word.length});
                      var wordEnd = position + word.length;

                      // move to next position of hit

                      index.pop();
                      while (index.length != 0) {
                        item = index[index.length - 1];
                        position = item.position;
                        word = item.word;
                        if (wordEnd > position) {
                          index.pop();
                        } else {
                          break;
                        }
                      }
                    }
                    searchTextCount += searchTextCountInSlice;
                    return {
                      hits: hits,
                      start: start,
                      end: end,
                      searchTextCount: searchTextCountInSlice
                    };
                  }

                  var slicesOfTitle = [];
                  if (indexOfTitle.length != 0) {
                    slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
                  }

                  var slicesOfContent = [];
                  while (indexOfContent.length != 0) {
                    var item = indexOfContent[indexOfContent.length - 1];
                    var position = item.position;
                    var word = item.word;
                    // cut out 100 characters
                    var start = position - 20;
                    var end = position + 80;
                    if(start < 0){
                      start = 0;
                    }
                    if (end < position + word.length) {
                      end = position + word.length;
                    }
                    if(end > content.length){
                      end = content.length;
                    }
                    slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
                  }

                  // sort slices in content by search text's count and hits' count

                  slicesOfContent.sort(function (sliceLeft, sliceRight) {
                    if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
                      return sliceRight.searchTextCount - sliceLeft.searchTextCount;
                    } else if (sliceLeft.hits.length !== sliceRight.hits.length) {
                      return sliceRight.hits.length - sliceLeft.hits.length;
                    } else {
                      return sliceLeft.start - sliceRight.start;
                    }
                  });

                  // select top N slices in content

                  var upperBound = parseInt('1');
                  if (upperBound >= 0) {
                    slicesOfContent = slicesOfContent.slice(0, upperBound);
                  }

                  // highlight title and content

                  function highlightKeyword(text, slice) {
                    var result = '';
                    var prevEnd = slice.start;
                    slice.hits.forEach(function (hit) {
                      result += text.substring(prevEnd, hit.position);
                      var end = hit.position + hit.length;
                      result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
                      prevEnd = end;
                    });
                    result += text.substring(prevEnd, slice.end);
                    return result;
                  }

                  var resultItem = '';

                  if (slicesOfTitle.length != 0) {
                    resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
                  } else {
                    resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
                  }

                  slicesOfContent.forEach(function (slice) {
                    resultItem += "<a href='" + articleUrl + "'>" +
                      "<p class=\"search-result\">" + highlightKeyword(content, slice) +
                      "...</p>" + "</a>";
                  });

                  resultItem += "</li>";
                  resultItems.push({
                    item: resultItem,
                    searchTextCount: searchTextCount,
                    hitCount: hitCount,
                    id: resultItems.length
                  });
                }
              })
            };
            if (keywords.length === 1 && keywords[0] === "") {
              resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
            } else if (resultItems.length === 0) {
              resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
            } else {
              resultItems.sort(function (resultLeft, resultRight) {
                if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
                  return resultRight.searchTextCount - resultLeft.searchTextCount;
                } else if (resultLeft.hitCount !== resultRight.hitCount) {
                  return resultRight.hitCount - resultLeft.hitCount;
                } else {
                  return resultRight.id - resultLeft.id;
                }
              });
              var searchResultList = '<ul class=\"search-result-list\">';
              resultItems.forEach(function (result) {
                searchResultList += result.item;
              })
              searchResultList += "</ul>";
              resultContent.innerHTML = searchResultList;
            }
          }

          if ('auto' === 'auto') {
            input.addEventListener('input', inputEventFunction);
          } else {
            $('.search-icon').click(inputEventFunction);
            input.addEventListener('keypress', function (event) {
              if (event.keyCode === 13) {
                inputEventFunction();
              }
            });
          }

          // remove loading animation
          $(".local-search-pop-overlay").remove();
          $('body').css('overflow', '');

          proceedsearch();
        }
      });
    }

    // handle and trigger popup window;
    $('.popup-trigger').click(function(e) {
      e.stopPropagation();
      if (isfetched === false) {
        searchFunc(path, 'local-search-input', 'local-search-result');
      } else {
        proceedsearch();
      };
    });

    $('.popup-btn-close').click(onPopupClose);
    $('.popup').click(function(e){
      e.stopPropagation();
    });
    $(document).on('keyup', function (event) {
      var shouldDismissSearchPopup = event.which === 27 &&
        $('.search-popup').is(':visible');
      if (shouldDismissSearchPopup) {
        onPopupClose();
      }
    });
  </script>




  

  
  <script src="https://cdn.lishaoy.net/js/av-core-mini-0.6.4.js"></script>
  <script>AV.initialize("SKflNaQWS70153r2kOqgcGge-gzGzoHsz", "gE9ySnRyOkS4UNzYJ7GOCa56");</script>
  <script>
    function showTime(Counter) {
      var query = new AV.Query(Counter);
      var entries = [];
      var $visitors = $(".leancloud_visitors");

      $visitors.each(function () {
        entries.push( $(this).attr("id").trim() );
      });

      query.containedIn('url', entries);
      query.find()
        .done(function (results) {
          var COUNT_CONTAINER_REF = '.leancloud-visitors-count';

          if (results.length === 0) {
            $visitors.find(COUNT_CONTAINER_REF).text(0);
            return;
          }

          for (var i = 0; i < results.length; i++) {
            var item = results[i];
            var url = item.get('url');
            var time = item.get('time');
            var element = document.getElementById(url);

            $(element).find(COUNT_CONTAINER_REF).text(time);
          }
          for(var i = 0; i < entries.length; i++) {
            var url = entries[i];
            var element = document.getElementById(url);
            var countSpan = $(element).find(COUNT_CONTAINER_REF);
            if( countSpan.text() == '') {
              countSpan.text(0);
            }
          }
        })
        .fail(function (object, error) {
          console.log("Error: " + error.code + " " + error.message);
        });
    }

    function addCount(Counter) {
      var $visitors = $(".leancloud_visitors");
      var url = $visitors.attr('id').trim();
      var title = $visitors.attr('data-flag-title').trim();
      var query = new AV.Query(Counter);

      query.equalTo("url", url);
      query.find({
        success: function(results) {
          if (results.length > 0) {
            var counter = results[0];
            counter.fetchWhenSave(true);
            counter.increment("time");
            counter.save(null, {
              success: function(counter) {
                var $element = $(document.getElementById(url));
                $element.find('.leancloud-visitors-count').text(counter.get('time'));
              },
              error: function(counter, error) {
                console.log('Failed to save Visitor num, with error message: ' + error.message);
              }
            });
          } else {
            var newcounter = new Counter();
            /* Set ACL */
            var acl = new AV.ACL();
            acl.setPublicReadAccess(true);
            acl.setPublicWriteAccess(true);
            newcounter.setACL(acl);
            /* End Set ACL */
            newcounter.set("title", title);
            newcounter.set("url", url);
            newcounter.set("time", 1);
            newcounter.save(null, {
              success: function(newcounter) {
                var $element = $(document.getElementById(url));
                $element.find('.leancloud-visitors-count').text(newcounter.get('time'));
              },
              error: function(newcounter, error) {
                console.log('Failed to create');
              }
            });
          }
        },
        error: function(error) {
          console.log('Error:' + error.code + " " + error.message);
        }
      });
    }

    $(function() {
      var Counter = AV.Object.extend("Counter");
      if ($('.leancloud_visitors').length == 1) {
        addCount(Counter);
      } else if ($('.post-title-link').length > 1) {
        showTime(Counter);
      }
    });
  </script>



  

  

  
  
    <script type="text/x-mathjax-config">
      MathJax.Hub.Config({
        tex2jax: {
          inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
          processEscapes: true,
          skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
        }
      });
    </script>

    <script type="text/x-mathjax-config">
      MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax(), i;
        for (i=0; i < all.length; i += 1) {
          all[i].SourceElement().parentNode.className += ' has-jax';
        }
      });
    </script>
    <script type="text/javascript" src=""></script>
  


  

  


  <div id="load" style=""></div>
  <!-- 新增看娘
  <script async src="/live2dw/js/perTips.js"></script>
  <script src="/live2dw/lib/L2Dwidget.min.js"></script>
  -->
  <!-- 页面点击小红心
  <script type="text/javascript" src="/js/src/love.js"></script>
  -->

  <!-- 背景动画
  <script type="text/javascript" src="/js/src/particle.js"></script>
  -->

   <!-- 输入爆炸效果来自 http://xiaowiba.com （小尾巴） 如有侵权，请通知我撤销
  <script type="text/javascript" src="/js/src/activate-power-mode.js"></script>
  -->

   <!-- UV、PV统计 不蒜子
   <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
  -->
  <script type="text/javascript" src="https://cdn.lishaoy.net/js/all-min-d98fa596b6.js"></script>
   <!-- 自己的脚本
  <script type="text/javascript" src="/js/src/cosyer.js"></script>
  -->
  <script>
// 下雪
//(function($){$.fn.snow=function(options){var $flake=$('<div id="flake" />').css({'position':'absolute','top':'-50px'}).html('&#10052;'),documentHeight=$(document).height(),documentWidth=$(document).width(),defaults={minSize:10,maxSize:20,newOn:500,flakeColor:"#FFFFFF"},options=$.extend({},defaults,options);var interval=setInterval(function(){var startPositionLeft=Math.random()*documentWidth-100,startOpacity=0.5+Math.random(),sizeFlake=options.minSize+Math.random()*options.maxSize,endPositionTop=documentHeight-40,endPositionLeft=startPositionLeft-100+Math.random()*200,durationFall=documentHeight*10+Math.random()*5000;$flake.clone().appendTo('body').css({left:startPositionLeft,opacity:startOpacity,'font-size':sizeFlake,color:options.flakeColor}).animate({top:endPositionTop,left:endPositionLeft,opacity:0.2},durationFall,'linear',function(){$(this).remove()});},options.newOn);};})(jQuery);
//$.fn.snow({ minSize: 5, maxSize: 50, newOn: 1000, flakeColor: '#00F' });

// 点线连接
!function () { function o(w, v, i) { return w.getAttribute(v) || i } function j(i) { return document.getElementsByTagName(i) } function l() { var i = j("script"), w = i.length, v = i[w - 1]; return { l: w, z: o(v, "zIndex", -1), o: o(v, "opacity", 1), c: o(v, "color", "255, 255, 255"), n: o(v, "count", 99) } } function k() { r = u.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, n = u.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight } function b() { e.clearRect(0, 0, r, n); var w = [f].concat(t); var x, v, A, B, z, y; t.forEach(function (i) { i.x += i.xa, i.y += i.ya, i.xa *= i.x > r || i.x < 0 ? -1 : 1, i.ya *= i.y > n || i.y < 0 ? -1 : 1, e.fillRect(i.x - 0.5, i.y - 0.5, 1, 1); for (v = 0; v < w.length; v++) { x = w[v]; if (i !== x && null !== x.x && null !== x.y) { B = i.x - x.x, z = i.y - x.y, y = B * B + z * z; y < x.max && (x === f && y >= x.max / 2 && (i.x -= 0.03 * B, i.y -= 0.03 * z), A = (x.max - y) / x.max, e.beginPath(), e.lineWidth = A / 2, e.strokeStyle = "rgba(" + s.c + "," + (A + 0.2) + ")", e.moveTo(i.x, i.y), e.lineTo(x.x, x.y), e.stroke()) } } w.splice(w.indexOf(i), 1) }), m(b) } var u = document.createElement("canvas"), s = l(), c = "c_n" + s.l, e = u.getContext("2d"), r, n, m = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (i) { window.setTimeout(i, 1000 / 45) }, a = Math.random, f = { x: null, y: null, max: 20000 }; u.id = c; u.style.cssText = "position:fixed;top:0;left:0;z-index:" + s.z + ";opacity:" + s.o; j("body")[0].appendChild(u); k(), window.onresize = k; window.onmousemove = function (i) { i = i || window.event, f.x = i.clientX, f.y = i.clientY }, window.onmouseout = function () { f.x = null, f.y = null }; for (var t = [], p = 0; s.n > p; p++) { var h = a() * r, g = a() * n, q = 2 * a() - 1, d = 2 * a() - 1; t.push({ x: h, y: g, xa: q, ya: d, max: 6000 }) } setTimeout(function () { b() }, 100) }();

// 崩溃欺骗
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
    if (document.hidden) {
        $('[rel="icon"]').attr('href', "/img/TEP.ico");
        document.title = '╭(°A°`)╮ 页面崩溃啦 ~';
        clearTimeout(titleTime);
    }
    else {
        $('[rel="icon"]').attr('href', "/favicon.ico");
        document.title = '(ฅ>ω<*ฅ) 噫又好了~' + OriginTitle;
        titleTime = setTimeout(function () {
            document.title = OriginTitle;
        }, 2000);
    }
});

// 存活时间
var aliveList=document.getElementsByClassName("alive")
setInterval(function() { 
var time = new Date(); 
// 程序计时的月从0开始取值后+1 
//根据自己博客的创建时间更改数值 
var t = "博客存活了"+Math.floor((+new Date - 1527868800000) / (1000 * 60 * 60 * 24)) + "天 " + time.getHours() + "小时" 
+ time.getMinutes() + "分" + time.getSeconds() + "秒"; 
aliveList[0].innerHTML = t; 
}, 1000); 
// 统计页面加载时间
window.onload = function () {
  var loadTime = window.performance.timing.domContentLoadedEventEnd-window.performance.timing.navigationStart; 
  console.log('Page load time is '+ loadTime);
}
</script>
  <script> $(function(){ $('#loader').css('display','none');});</script>
<style>
    .comments.no-post {
      background: transparent;
    }
    .no-post.v *{
      color: #ddd;
    }
    .v .vlist p {
      margin: 12px 0;
    }
    .v .vbtn {
      background: #fbfbfb;
      padding: .3rem 1.2em;
      border: 1px solid #dddddd75;
    }
    .no-post.v .vbtn {
      background: #2222220a;
    }
    .no-post.v .vbtn:active, .no-post.v .vbtn:hover {
      background-color: #fff;
    }
    .no-post.v .vwrap {
      border: 1px solid #f0f0f036;;
    }
    .no-post.v a {
      color: #ddd;
    }
    .v ul {
      padding-left: 25px;
    }
    .v ul li {
      list-style: disc;
      padding: 2px 15px 0 0;
    }
    .v .vlist strong , .vinput.vpreview strong {
        color: #87daff;
        font-size: 108%;
    }
    .v .vlist .vcard .vhead .vsys {
        background: #87daff17;
        color: #aaa;
        border: 1px solid #87daff1f;
        padding: 1px 5px;
        font-size: 12px;
        line-height: 1.4;
    }

    .no-post.v .vlist .vcard .vhead .vsys{
      background: #ededed1f;
      color: #808080;
      padding: 1px 5px;
      font-size: 12px;
      line-height: 1.4;
      border: none;
    }

    .v .vlist .vcard .vcontent a {
      color: #86dbff;
      border-bottom-color: #86dbff99;
    }

    .v .vlist .vcard .vcontent a:hover {
        color: #d7191a;
        border-bottom-color: #222;
    }

    .no-post.v .vlist .vcard section {
        border-bottom: 1px dashed #f5f5f55e;
    }

    .v .vwrap .vheader .vinput {
        width: 33.33%;
        border-bottom: 1px dashed #dedede45;
    }
    .no-post.v .vwrap .vheader .vinput::-webkit-input-placeholder {
        color: #808080;
    }
    .no-post.v .vwrap .vheader .vinput:-ms-input-placeholder{  /* Internet Explorer 10-11 */
        color: #808080;
    }
    .v .txt-right {
        display: none;
    }

    .v .vlist .vcard .vcontent .code, .v .vlist .vcard .vcontent code, .v .vlist .vcard .vcontent pre , .vinput.vpreview code , .vinput.vpreview pre {
      color: #005098fc;
      background: #87daffb8;
      border-radius: 4px;
      box-shadow: 0 0 2px #87daff;
      font-size: 90%;
      padding: 2px 6px;
    }
    .v .vlist .vcard .vcontent img {
      max-width: 18px;
      display: inline-block;
    }

    .v .vlist .vcard .vcontent img{
      max-width:18px;
      display:inline-block
    }

    .v .vwrap .vheader .vinput:focus {
      border-bottom: 1px solid #87daff;
    }
    .v .vlist .vcard .vcontent pre , .vinput.vpreview pre {
        background: #87daff21;
        border-radius: 4px;
        box-shadow: 0 0 2px #ffffff33;
    }
    .v .vlist .vcard .vcontent pre code ,.vinput.vpreview pre code {
        color: #87daff;
        background: #87daff00;
        border-radius: 4px;
        box-shadow: 0 0 2px #87daff05;
    }
    .v .vlist .vcard .vcontent.expand:after {
      color: #ff0000de;
      font-size: 110%;
      font-weight: bold;
      background: #87daff38;
      border-bottom-right-radius: 4px;
      border-bottom-left-radius: 4px;
    }
    .comments.no-post .vlist .vcard .vcontent.expand:after {
      color: #fff;
    }
    @media screen and (max-width: 414px) {
        .v .vlist {
            padding-left: 0;
        }
    }
    .v .vlist .vcard .vcontent.expand:before {
        background: linear-gradient(180deg,hsla(0, 0%, 100%, 0),hsla(199, 100%, 76%, 0.22));
        background: -webkit-gradient(linear,left top,left bottom,from(hsla(0,0%,100%,0)),to(hsla(199, 100%, 76%, 0.22));
    }
</style>

</body>
</html>
